美文网首页
JS动态设置css样式

JS动态设置css样式

作者: AAA前端 | 来源:发表于2023-12-17 10:41 被阅读0次

主要用到:root伪类实现
是一个伪类,表示文档根元素,所有主流浏览器均支持 :root 选择器
在:root中声明相当于全局属性,只要当前页面引用了:root segment所在文件,都可以使用var()来引用。

<script>
created() {
  if (flag) {
      document.documentElement.style.setProperty('--anzhuo-weight', '500');
    } else {
      document.documentElement.style.setProperty('--anzhuo-weight', '700');
    }
}
</script>
<style scoped lang='less'>
  :root {
    --anzhuo-weight: 700;;
  }
......
    .txt {
      font-size: 19px;
      color: #F35E00;
      font-weight: var(--anzhuo-weight);
    }
</style>

参考:
https://blog.csdn.net/Wancc123/article/details/127227765

相关文章

网友评论

      本文标题:JS动态设置css样式

      本文链接:https://www.haomeiwen.com/subject/dzqogdtx.html