经过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 */
}
复制代码

参考

MDN
CSS Variable 规范

感谢您的阅读