css 变量优先使用最近的，js 可以动态修改变量值
<!DOCTYPE html>
<html lang="en" style="background-color: #f8f8f8;">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
body {
--background-color: green;
--color: white;
}
h1 {
background-color: var(--background-color);
}
p {
--background-color: gray;
--color: white;
background-color: var(--background-color);
}
p span {
color: var(--color);
}
</style>
</head>
<body>
<h1>2秒后我的背景有变化</h1>
<p>
<b>123456</b>
<span>这里会调用最近的变量</span>
</p>
</body>
<script>
setTimeout(() => {
document.body.style.setProperty('--background-color', '#00f');
}, 2000)
</script>
</html>
本文通过一个示例展示了CSS变量在HTML文档中的使用，包括定义和优先级规则。JS动态修改CSS变量，2秒后改变页面背景颜色。演示了CSS变量在不同元素间的继承和覆盖，以及JavaScript如何实时更新页面样式。
5527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
