css 自定义属性，css变量，级联变量，可以文档中重复使用的样式变量

声明

  • 要以两个减号（-）开始
  • 大小写敏感
  • 属性值则可以是任何有效的css值
  • 和其他属性一样 自定义写在规则集之内
  • 规则集 定了自定属性的 可见作用域
  • 自定义属性具有继承性，受级联的约束，从其父级继承值
  • 最佳实践 伪类：root 相当于全局变量 ```css element { —main-bg-color: brown; }

:root { —main-bg-color: brown; }

  1. <a name="u1i5d"></a>
  2. ### 使用
  3. ```css
  4. p{
  5.     color: var(--main-color);
  6. }
  8. // 备用默认值
  9. var(--my-var,red)
  10. var(--my-var,var(--my-background,pink))

js更新变量

  1. // 获取一个dom节点上的 css 变量
  2. element.style.getProperyValue('--my-var');
  4. // 获取任意 Dom 节点上的css变量
  5. getComputedStyle(element).getPropertyValue('--my-var');
  7. // 修改一个dom节点上css 变量
  8. element.style.setProperty('--my-var',newValue);

vue3响应式 css变量

  1. <template>
  2. <div class='text' >hello</div>
  3. </template>
  4. <script>
  6. export default{
  7.     data(){
  8.       return{
  9.         color:"red"
  10.         }
  11.   }
  12. }
  14. </script>
  16. <style vars="{color}">
  17.   .text{
  19.     color:var(--color);
  20.   }
  23. </style>