經過CSS變量修改樣式

時間 2019-11-06

標籤經過 css 變量修改樣式欄目 CSS 简体版

原文原文鏈接

問題：

js怎麼去修改css僞類樣式呢？可是js並無僞類選擇器，那麼該怎麼辦呢？網上有很多方法，好比經過切換元素的類、在style中動態插入新的樣式等。javascript

那麼這裏再來一種方法，設置css變量（var），經過js去改變這個變量來實現。css

示例： 改變div的hover背景色html

<!-- 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. 基本用法

局部變量java

div {
    --masterColor: red;
    background: var(--masterColor);
}
複製代碼

全局變量瀏覽器

/* 對於HTML來講，:root 表示 <html> 元素 */
:root {
    --masterColor: red;
}
div {
    background: var(--masterColor);
}
複製代碼

2. 語法

var( <custom-property-name> [, <declaration-value> ]? )bash

<custom-property-name>: 自定義屬性名
<declaration-value>: 聲明值（fallback value）ui

示例：spa

div {
    /* --masterColor未定義，因此背景色使用red 它能夠經過逗號分隔，定義多個聲明值，var(--masterColor, red, green) */
    background: var(--masterColor, red);
}
複製代碼

變量能夠經過var()進行引用code

示例：htm

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 */
}
複製代碼