Pan的技术生涯

Appearance

Return to top
文章目录

css变量

css 变量声明和使用

css
.box {
  /* 定义css变量 */
  --testColor: red;
  --color1: pink;
  --color2: aquamarine;
  /* 特殊使用方式 */
  --bg: linear-gradient(to right, var(--color1), var(--color2));
}
.link {
  /* 设置css变量默认值 */
  color: var(--testColor, #999);
  /* 设置多个css变量默认值 */
  font-family: var(--fonts, Helvetica, Arial, sans-serif);
}

css 变量的作用域

变量只能作用于自身以及后代元素，根据这个特性，可以对 css 变量值进行作用域范围内的覆盖

对于 CSS 变量，却是有作用域概念的，变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。根据这个特性，可以对 css 变量值进行作用域范围内的覆盖

全局 css 变量

通过 css 设置 css 全局变量

css
:root {
  --windowW: 100px;
  --windowH: 100px;
}

通过 js 设置/修改 css 全局变量

js
//修改CSS中的全局变量
document.documentElement.style.setProperty('--windowW', '200px')
document.documentElement.style.setProperty('--windowH', '300px')

局部变量

html
<style>
  .box {
    --color: red;
    color: var(--color);
  }
  .a {
    /* 这里会覆盖.box中设置color变量值，
    并应用新的color变量值，对color属性进行重新设置 */
    --color: green;
    color: var(--color);
  }
  .b {
    /* 这里会覆盖.box中设置color变量值，
    并应用新的color变量值，对color属性进行重新设置 */
    --color: blue;
    color: var(--color);
  }
  .c {
    /* 注意：这里虽然覆盖了.box中设置的color变量，
    但并未应用这个新的color变量值对任何css属性进行修改，
    因此文字颜色还是实用.box中设置的颜色 */
    --color: yellow;
  }
</style>

<div class="box">
  <div class="a">测试a</div>
  <div class="b">测试b</div>
  <div class="c">测试c</div>
</div>

修改 css 变量值的方式

通过 js 修改

修改全局变量值

js
//修改CSS中的全局变量
document.documentElement.style.setProperty('--windowW', '200px')
document.documentElement.style.setProperty('--windowH', '300px')

修改 dom 元素继承的 css 变量值

js
//修改CSS中的全局变量
dom.style.setProperty('--windowW', '200px')
dom.style.setProperty('--windowH', '300px')
/**
 * 如果当前dom的先辈元素都没有声明这个css变量，
 * 那这就相当于新定义了一个css变量，该变量的有效范围为当前元素以及其子孙元素
 */
dom.style.setProperty('--windowX', '300px')

通过内联行内样式修改

html
<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>

示例

通过各种方式修改css变量
从这个例子的第3和第6个li的实际效果可以看出，css变量值覆盖之后，必须显示的使用，才会有实际改变样式效果，单纯覆盖css变量值并不会有样式变化