动态更新CSS自定义变量属性值,感觉非常棒的小技巧

最新推荐文章于 2024-01-23 17:33:44 发布

置顶会点php的前端小渣渣

最新推荐文章于 2024-01-23 17:33:44 发布

阅读量2.7k

点赞数

分类专栏： css js 文章标签： css3 css

本文链接：https://blog.csdn.net/qq_39523111/article/details/104410457

版权

js 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

css

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态更新CSS属性值</title>
<style>
:root {
  --qq: red;
}
#ex1 {
  color: var(--qq);
}
</style>
</head>
<body>
<h1>setProperty() 方法</h1>

<p>点击按钮动态更新CSS 属性值。
   包括可以更新var()
   css自定义变量以:root 并且--开头
</p>

<button onclick="myFunction()">点我</button>

<div id="ex1">一些文本。</div>

<script>
function myFunction() {
  //var declaration = document.styleSheets[0].cssRules[0].style;
  var style =document.getElementById('ex1').style;
  var setprop = style.setProperty("--qq", "yellow");
  //点击的时候就会把颜色变成黄色了
}
</script>

</body>
</html>

平时我们做的tab切换，动态改变颜色，等等....都可以这样做。简直太爽了。

下面这种是vue方式设置全局主题

vue引入方式设置主题
export default function(styleObject) {
  const docStyle = document.documentElement.style;
  for (let key in styleObject) {
    if (styleObject.hasOwnProperty(key)) {
      docStyle.setProperty(key, styleObject[key]);
    }
  }
}

import setTheme from "@/theme"; //设置主题色 

setTheme({
  "--mtc": "#4EC190",
  "--mtc-rgba": "rgba(78,193,144,1)",
  "--mtc-hover": "#37AB7A",
  "--mtc-active": "#49CD95",
  "--mtc-disabled": "#90D4B5",
  "--headerBarBg":
    "linear-gradient(69deg,rgba(36,152,105,1) 0%,rgba(57,174,124,1) 100%)",
  "--fc-dark": "#757575", //字体颜色
  "--sc": "rgba(255, 95, 95, 1)", //辅色(红色)
  "--sc-hover": "rgba(236, 89, 89, 1)",
  "--sc-active": "rgba(255, 118, 118, 1)"
});