JS读写CSS样式的方法汇总

首先，我们需要了解JS读写CSS样式的相关知识。在HTML中，可以通过内嵌样式或外联样式表来设置页面的样式。而JS可以通过一些方法来读取或修改这些样式。

一、读取CSS样式

1.1 获取样式值

可以通过style对象或window.getComputedStyle()方法来获取元素的样式值。其中，style对象只能获取内嵌样式，而window.getComputedStyle()可以获取内嵌和外联样式。

示例：

<!--HTML代码-->
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

//JS代码
var box = document.getElementById('box');
console.log(box.style.width); //输出100px
console.log(box.style.height); //输出100px
console.log(window.getComputedStyle(box)['background-color']); //输出rgb(255, 0, 0)

1.2 获取计算后的样式值

可以通过window.getComputedStyle()方法来获取元素经过计算后的样式值。该方法的第二个参数可以设置伪类，如:hover、:active等。

示例：

<!--HTML代码-->
<style>
    div:hover{
        background-color: blue;
        color: #fff;
    }
</style>
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

//JS代码
var box = document.getElementById('box');
console.log(window.getComputedStyle(box, ':hover')['background-color']); //输出rgb(0, 0, 255)
console.log(window.getComputedStyle(box, ':hover')['color']); //输出rgb(255, 255, 255)

二、修改CSS样式

2.1 直接修改样式属性

可以通过style对象来直接修改元素的样式属性。

示例：

<!--HTML代码-->
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

//JS代码
var box = document.getElementById('box');
box.style.backgroundColor = 'blue';

2.2 通过设置类名来修改样式

可以通过设置元素的类名来批量修改其样式，这种方式更易维护和管理。

示例：

<!--HTML代码-->
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box-blue{
        background-color: blue;
    }
</style>
<div id="box" class="box"></div>

//JS代码
var box = document.getElementById('box');
box.classList.add('box-blue');

结论

通过上述方法，可以方便地实现JS读写CSS样式的功能。同时，可以根据实际需求选择不同的方法来操作样式，提高代码的可读性和可维护性。