-
<!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>
-
标签：变量,16,color,js,--,css,var,root,Math From： https://www.cnblogs.com/fqh123/p/18001289