CSS 自定義屬性（變數）

2021-09-24 07:21:01 字數 1156 閱讀 5449

var()函式用來獲取和使用 css 變數 （css variables）

var( [, ]? )


複製**

語法

:root 


}複製**
用途

相容性

目前沒有瀏覽器支援，chrome 之前支援後來又移除

參考通過下面的方式來宣告變數：

--variable-name: variable-value;


複製**
變數名區分大小寫，變數值可以是顏色、字串、多個值的組合。

:root ;


}複製**
js 獲取變數

在 js 中可以通過getpropertyvalue()和setproperty()來獲取和修改 css 變數值。

:root 


// read


const rootstyles = getcomputedstyle(document.documentelement); // :root


const color = rootstyles.getpropertyvalue('--screen-category').trim();


// write


document.documentelement.style.setproperty('--color', '#03a9f4');


複製**
擴充套件

用途相容性

除 ie 外，其它瀏覽器均支援

檢測瀏覽器是否支援 css 自定義屬性

@supports((--c: 0)) 


@supports(not (--c: 0)) 


複製**
if (css && css.supports && css.supports('--c', 0))  else 


if (hasnativecssproperty()) else 


}複製**
參考

CSS自定義屬性

1.自定義屬性的使用方法 自定義屬性分為 區域性自定義屬性 全域性自定義屬性 使用 宣告自定義屬性 使用兩個 宣告 例如 bg color red 注意這裡有乙個 冒號 這樣就宣告了乙個自定義屬性 bg color 和red 宣告後如何使用 var 自定義屬性名 括號還是要加上兩個 backgrou...

CSS自定義變數

試想下在複雜的專案中，css樣式會不斷累加，看到純數值的屬性值，我們很難理解它們的含義，如果我們可以給它們取乙個變數名來表示它們的含義，這樣更加便於我們理解和復用，於是就有了ccs變數的出現。如何使用它呢？在定義變數時一定要新增 字首，在使用它時需要使用var 函式，並且它也有作用域範圍，如果需要設...

CSS自定義屬性Expression

css的出現使網頁製作者在對網頁元素的控制方便許多，當然，有利必有弊，css只能對顏色 大小 距離等靜態樣式有效，對於要實現某些html元素的動態樣式就顯得有些力不從心。有了css的自定義屬性expression，可以自己定義屬性，自己在屬性裡寫需要的 這樣就可以結合css的特性與js特效，實現對整...