使用場景

需要動態計算一個p(A盒子)的left值,該值為這個A盒子的自身寬度,A盒子的自身寬度根據內容變化而變化

使用方法

在css中增加

:root{
  --movenum: 0;
}

在root中自定義變量:‘–movenum’

在JS中

//獲取root元素
const root = document.querySelector(':root');
//num為A盒子自身的寬度(通過JS計算獲取),將num賦值給自定義變量 "--movenum"
root.style.setProperty('--movenum', num);

在目標css中使用

.closestyle {
  left: var(--movenum);
}

原理

root里面可以聲明css全局變量，變量的聲明對大小寫敏感，且需要在被聲明的變量前加上"–",且變量只能作為屬性值，不能作為屬性名！
聲明了css全局變量，就可以調用它，通過var()函數調用
例:

:root {
    --primary-color: #ff434f;
    --secondary-color: #e3e3e3;
    --text-color-darker: #2e2e2e;
    background-color: rgb(190, 26, 26);
}
p {
    width: 500px;
    height: 500px;
    background-color: var(--secondary-color);
}
body {
    background-color: var(--text-color-darker);
}

background-color: var(–secondary-color,#ff434f); var()也可以有第二個參數，表示默認值，如果調用的變量不存在則使用默認值。

另: var()還能定義字符串和數值

--hello:'hello';
--max:1920px;
--marigin:30px 20px 40px;

下面是其它同學的補充

css中的 :root

:root
是一個偽類，表示文檔根元素，所有主流瀏覽器均支持 :root 選擇器，除了 IE8 及更早的版本。
在:root中聲明相當于全局屬性，只要當前頁面引用了:root segment所在文件，都可以使用var()來引用。
用 – 這樣寫法加上樣式名稱 例如：–background 引用：var(–background)

:root {
? ? --blue: #007bff;
? ? --color:red;
? ? --background:#ccc;
}

var()

var()函數可以代替元素中任何屬性中的值的任何部分。var()函數不能作為屬性名、選擇器或者其他除了屬性值之外的值。（這樣做通常會產生無效的語法或者一個沒有關聯到變量的值。）

body {
? background-color: var(--background); ?/* 設置背景顏色為#ccc */
}

到此這篇關于CSS中的動態變量(通過:root選擇器和var())的文章就介紹到這了,更多相關CSS 動態變量root內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的CSS中的动态变量(通过:root选择器和var())(css怎么做动态效果)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。