js获取/设置css变量

-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  :root{
    --color: red
  }
  .a{
    color: var(--color)
  }
</style>
</head>
<body>
  <div class="a">哈哈啊哈</div>
<script>
// 获取根元素
var root = document.documentElement;
var computedStyle = getComputedStyle(root);
var mainBgColor = computedStyle.getPropertyValue('--color');
console.log('mainBgColor', mainBgColor)
setInterval(() => {
  // 设置CSS变量的值
  root.style.setProperty('--color', generateRandomColor());
}, 1000);
// 生成16进制的值
function generateRandomColor() {
  // 生成随机的 R, G, B 分量
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);

  // 将 R, G, B 转换为 16 进制，并确保长度为 2
  var hexR = ('0' + r.toString(16)).slice(-2);
  var hexG = ('0' + g.toString(16)).slice(-2);
  var hexB = ('0' + b.toString(16)).slice(-2);

  // 拼接成完整的 16 进制颜色值
  var hexColor = '#' + hexR + hexG + hexB;

  return hexColor;
}
</script>
</body>
</html>

 

 

-

posted @ 2024-02-01 15:07  古墩古墩  Views(229)  Comments(0)  Edit  收藏  举报