封装css样式获取和设置函数
CSS（层叠样式表）是网页前端开发的重要组成部分，通过CSS，可以方便的控制网页的样式和布局。JS提供了许多操作DOM和CSS的方法，通过JS可以获取和设置CSS样式，本篇文章主要介绍CSS样式的获取和设置方法的封装。
1. 获取CSS样式值
在JS中获取CSS样式的值有多种方法，这里介绍其中的一种方法。首先，我们需要获取到要获取样式值的元素，然后使用getComputedStyle()方法获取该元素的计算样式。
/* HTML */
<div id="myDiv" style="width: 100px; height: 100px; background-color: f00;"></div>
/* 获取元素 */
const myDiv = document.getElementById('myDiv');
/* 获取计算样式 */
const computedStyle = window.getComputedStyle(myDiv);
/* 获取背景色 */
const backgroundColor = computedStyle.getPropertyValue('background-color');
console.log(backgroundColor); // "rgb(255, 0, 0)"
在上面的代码中，我们使用getElementById()方法获取到id为myDiv的元素，然后使用getComputedStyle()方法获取计算样式，最后使用getPropertyValue()方法获取背景色。需要注意的是，getPropertyValue()方法返回的值是一个字符串，如果需要使用该值进行计算，需要将其转换为合适类型的值。
2. 设置CSS样式值
在JS中设置CSS样式的值也有多种方法，这里介绍其中的一种方法。和获取样式不同的是，我们需要获取到要设置样式值的元素的style属性，然后使用其对应的属性名设置样式值。
/* 获取元素 */
const myDiv = document.getElementById('myDiv');
/* 设置样式值 */
myDiv.style.backgroundColor = '00f';
在上面的代码中，我们使用getElementById()方法获取到id为myDiv的元素，然后使用其style属性设置背景色。需要注意的是，设置样式值是直接使用JS操作DOM树，因此不需要使用getPropertyValue()方法获取计算样式。
3. 封装函数
根据上面的介绍，我们可以封装一个简单的CSS样式获取和设置函数：
/* 获取元素的样式值 */
function getStyle(element, property) {
const computedStyle = window.getComputedStyle(element);
const value = computedStyle.getPropertyValue(property);
return value;
}
/* 设置元素的样式值 */
function setStyle(element, property, value) {
element.style[property] = value;
}
使用上面的封装函数，我们可以方便的获取和设置CSS样式的值：
/* 获取元素的背景色 */
const myDiv = document.getElementById('myDiv');
const backgroundColor = getStyle(myDiv, 'background-color');
/* 设置元素的背景色 */
setStyle(myDiv, 'background-color', 'blue');
上述代码中，我们使用getStyle()方法获取id为myDiv元素的背景色，使用setStyle()方法将其修改为blue。
4. 总结
通过封装CSS样式获取和设置函数，我们可以简化JS操作CSS样式的过程，使得代码更加易读和易于维护。当然，不同的项目和场景对CSS样式的操作需求是不同的，需要根据具体情况进行选择和封装。