問題
js怎么去修改css偽類樣式呢？但是js并沒有偽類選擇器，那么該怎么辦呢？網上有不少方法，比如通過切換元素的類、在style中動態插入新的樣式等。
那么這里再來一種方法，設置css變量（var），通過js去改變這個變量來實現。
示例：改變div的hover背景色
<!-- css --><style type="text/css"> :root { --divHoverColor: red; } div { width: 100px; height: 100px; background: bisque; } div:hover { background: var(--divHoverColor); }</style><!-- html --><div onClick="onDivClick('green')"/><!-- js --><script type="text/javascript"> function onDivClick(value){ document.documentElement.style.setProperty('--divHoverColor', value); }</script>那么，來認識下css variable吧
1. 基本用法
局部變量
div { --masterColor: red; background: var(--masterColor);}全局變量
/* 對于HTML來說，:root 表示 <html> 元素 */:root { --masterColor: red;}div { background: var(--masterColor);}2. 語法
var( <custom-property-name> [, <declaration-value> ]? )
<custom-property-name> : 自定義屬性名
<declaration-value> : 聲明值（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. 瀏覽器支持
Can I use
使用@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 */}參考
MDN
CSS Variable 規范
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
