1. 首先getComputedStyle()此方法用于获取当前dom的样式
getComputedStyle() 的使用方法:
// getComputedStyle方法可以用来获取DOM元素实际显示时的样式
// getComputedStyle是window全局对象的一个方法,可以传递两个参数,第一个参数指定一个用来获取计算样式的DOM元素,
// 第二个参数(可选)指定一个要匹配的伪元素的字符串,普通元素可省略或传null。
2. 使用setProperty()方法来修改当前dom元素的样式,传入两个参数,第一个是,要修该的样式,第二个参数是要更改为的值
3. 代码示意如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root {
/* css全局变量 */
--main-color: blue;
}
.alert {
/* css局部变量 */
--main-color: red;
}
p {
color: var(--main-color);
text-align: center;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>blue paragraph.</p>
<div class="alert">
<p>red paragraph.</p> <!--这个p标签在alert这个父元素之下,所以定义值为局部变量的值-->
</div>
</div>
</body>
<script>
let div = document.querySelector('.alert') // 获取dom元素
let divCss = getComputedStyle(div) // 缓存该dom的样式
console.log(divCss); // 打印的结果中是该dom元素的所有的值
let cssVal = String(divCss.getPropertyValue('--main-color')).trim() // 获取css变量的值
// String将值转化为字符串, trim() 去除字符串两边的空格
console.log(cssVal); // red
div.style.setProperty('background','pink') // 给获取到的dom元素的变量设置值
div.style.setProperty('font-size','50px') // font-size不需要使用驼峰书写
</script>
</html>