自定义属性

CSS 的自定义属性（也叫做变量）是通过前缀--定义的
区分大小写
同一个变量可以在多个选择器内声明。读取的时候，优先级最高的声明生效，这与 CSS 的“层叠”规则是一致的
var(<custom-property-name>, <declaration-value>?)用于读取变量。<custom-property-name>为变量名称，<declaration-value>为默认值
声明变量的时候可以使用var()

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>CSS自定义属性</title>
    <style type="text/css">
      :root {
        --first-color: red;
        --temporary-color: white;
        --second-color: var(--temporary-color);
      }

      #firstParagraph {
        background-color: var(--first-color);
        color: var(--second-color);
      }

      #secondParagraph {
        background-color: var(--second-color);
        color: var(--first-color);
      }

      #container {
        --first-color: green;
      }

      #thirdParagraph {
        background-color: var(--first-color);
        color: var(--second-color);
      }
    </style>
  </head>
  <body>
    <p id="firstParagraph">
      This paragraph should have a red background and white text.
    </p>
    <p id="secondParagraph">
      This paragraph should have a white background and red text.
    </p>
    <div id="container">
      <p id="thirdParagraph">
        This paragraph should have a green background and white text.
      </p>
    </div>
  </body>
</html>

自定义属性

calc

在 CSS 中使用calc()可是实现加、减、乘、除。

1
2
3

width: calc(100% - 20px);
--custom-height: calc(60% + 20px);
height: calc(var(--custom-height) * 1.5);

通过 JavaScript 访问自定义属性

可以通过getComputedStyle().getPropertyValue()来访问在 CSS 中定义的变量
变量是可继承的
不允许通过该方式修改变量值，否则会抛出错误

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>CSS自定义属性</title>
    <style type="text/css">
      :root {
        --first-color: red;
        --second-color: white;
      }

      #myDiv {
        --first-color: green;
      }
    </style>
  </head>
  <body>
    <div id="myDiv" style="width: 10px"></div>
    <script type="text/javascript">
      let div = document.getElementById('myDiv');

      let computedStyle = document.defaultView.getComputedStyle(div, null);

      console.log(computedStyle['--first-color']); // undefined
      console.log(computedStyle.getPropertyValue('--first-color')); // green
      console.log(computedStyle.getPropertyValue('--second-color')); // white
    </script>
  </body>
</html>

通过 JavaScript 修改自定义属性

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>CSS自定义属性</title>
    <style type="text/css">
      #myDiv {
        --first-color: green;
      }
    </style>
  </head>
  <body>
    <div id="myDiv" style="width: 10px"></div>
    <script type="text/javascript">
      let div = document.getElementById('myDiv');

      console.log(div.style.getProperty('--first-color')); // green

      div.style.setProperty('--first-color', 'red');

      console.log(div.style.getProperty('--first-color')); // red
    </script>
  </body>
</html>