JS操作CSS变量（var）动态改变颜⾊
css变量
css设置公⽤颜⾊–color，css中的引⽤⽅法var(–color)。
根据 root.setAttribute(‘style’, ‘–color: #e74c3c’) 可修改–color的参数。
例⼦如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root {
-
-color: #7f8c8d;
--spacing: 20px;
}
height: 100px;
width: 100px;
background-color: var(--color);
padding: var(--spacing);
}
</style>
</head>
<body>
<div class="colors">
</div>
<div class="actions">
<a class="red">div红⾊</a>
<a class="blue">div蓝⾊</a>
</div>
</body>
<script>
var btnColorRed = document.querySelector('.red');
var btnColorBlue = document.querySelector('.blue');
var root = document.querySelector(':root');
btnColorRed.addEventListener('click', function() {
root.setAttribute('style', '--color: #e74c3c');
});
btnColorBlue.addEventListener('click', function() {
root.setAttribute('style', '--color: #3498db');
});
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。