JS动态设置css样式

2023-12-17  本文已影响0人  AAA前端

主要用到: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

上一篇 下一篇

猜你喜欢

热点阅读