js怎么去修改css偽類樣式呢？但是js并沒有偽類選擇器，那么該怎么辦呢？網(wǎng)上有不少方法，比如通過切換元素的類、在style中動態(tài)插入新的樣式等。

那么這里再來一種方法，設置css變量(var)，通過js去改變這個變量來實現(xiàn)。

示例：改變div的hover背景色

:root {

--divHoverColor: red;

}

div {

width: 100px;

height: 100px;

background: bisque;

}

div:hover {

background: var(--divHoverColor);

}

function onDivClick(value){

document.documentElement.style.setProperty('--divHoverColor', value);

}

復制代碼

那么，來認識下css variable吧

1. 基本用法

局部變量

div {

--masterColor: red;

background: var(--masterColor);

}

復制代碼

全局變量

/* 對于 HTML 來說，:root 表示 元素 */

:root {

--masterColor: red;

}

div {

background: var(--masterColor);

}

復制代碼

2. 語法

var( [, ]? )

: 自定義屬性名

: 聲明值(fallback value)

示例：

div {

/*

--masterColor未定義，所以背景色使用red

它可以通過逗號分隔，定義多個聲明值，var(--masterColor, red, green)

*/

background: var(--masterColor, red);

}

復制代碼

變量可以通過var()進行引用

示例：

div {

--masterColor: red;

--bgColor: var(--masterColor)

}

復制代碼

注意：屬性名是不能使用變量的

錯誤示例：

div {

--bg: background;

var(--bg): red;

}

復制代碼

3. 瀏覽器支持

使用@support檢測

@supports ( (--masterColor: red)) {

/* supported */

}

@supports ( not (--masterColor: red)) {

/* not supported */

}

復制代碼

使用JS檢測

const isSupported = window.CSS && window.CSS.supports

&& window.CSS.supports('--masterColor', 'red');

if (isSupported) {

/* supported */

} else {

/* not supported */

}

復制代碼

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的html怎么给变量添加样式,通过CSS变量修改样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。