使用css變數儲存 自定義屬性 L01

可以通過變數來給css做全域性變數，在每個標籤都可以使用。

/* 設定全域性變數 */

:root
body
複製**

/* 設定區域性變數 */

.box
.box
.grid
.grid
.box p
複製**

// #06c .box

const box = document.queryselector(".box");
const boxstyles = getcomputedstyle(box);
// console.log(boxstyles);
const boxbordercolor = boxstyles.getpropertyvalue("--box-border-color");
// console.log(boxbordercolor);
const header = document.queryselector("#main-header");
header.style.setproperty("--header-bg-color","green");
複製**

這個樣式真的很好用，對於頁面排版很不錯

CSS 自定義屬性（變數）

var 函式用來獲取和使用 css 變數 css variables var 複製 語法 root 複製 用途 相容性目前沒有瀏覽器支援，chrome 之前支援後來又移除 參考通過下面的方式來宣告變數 variable name variable value 複製 變數名區分大小寫，變數值可以是顏色...

CSS自定義屬性

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

CSS自定義變數

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