關於CSS中函數的使用----var()函數 與 attr()函數

1 關於var()函數使用注意點:

　　這個函數的作用獲取自定義屬性的值

　　

　　關於自定義屬性:

　　1 出現位置

　　　　要么在

　　　　　　<style>

　　　　　　　　body{

　　　　　　　　　　--self-property: 1;

　　　　　　　　}

　　　　　　</style>

　　　　要么在

　　　　<div style="--self-property: 1"></div>

　　總之必須要在style中

　　2 格式要求:

　　　　自定義屬性必須要加上   --    前綴來標明這是一個自定義屬性, 否則瀏覽器無法解析

　　3 獲取方式:

　　　　var(--self-property)  直接獲取, 不需要加引號, 一般會配合calc()函數來使用

　　4 高級使用案例

<div class="wavy">
  <span style="--i:1">內</span>
  <span style="--i:2">容</span>
  <span style="--i:3">加</span>
  <span style="--i:4">載</span>
  <span style="--i:5">中</span>
  <span style="--i:6">.</span>
  <span style="--i:7">.</span>
  <span style="--i:8">.</span>
</div>


.wavy span{
      position: relative;
      display: inline-block;
      color: #ffffff;
      font-size: 2em;
      animation: animate 1s ease-in-out infinite;
      animation-delay: calc(.1s*var(--i));
    }

　　這個直接通過使用CSS中的var()函數就完成了不同的元素的屬性設置問題, 極具參考價值,

　　這個案例主要是展示了如果通過CSS獲取一個元素在父元素中的位置,   極具參考價值

 

　　5 關於作用域的猜測, 感覺自定義屬性會有一個類似於作用域的東西, 從最近層開始尋找, 找到了就獲取值, 找不到逐級往上尋找, 直到找到為止

　　　　　　　　

 

 

2 關於attr()函數使用注意點

　　attr()函數與var()函數有一個很大的相同之處, 都是獲取屬性值, 

　　兩個函數的不同點:

　　　　var()函數必須要獲取內聯屬性, 即必須要是在啊style中的屬性

　　　　attr()函數需要獲取的標簽中的屬性, 也可以是自定義屬性, 但是必須要是在標簽中的屬性

 

　　　　1 出現位置

　　　　<div self-property="value"></div>

　　　　2 獲取方式

　　　　attr(self-property)