JS设置CSS样式的方式汇总

关于“JS设置CSS样式的方式汇总”的完整攻略，我会从以下几个方面进行讲解。

一、通过js修改元素内联样式

元素内联样式指的是直接指定在元素上的style属性，可以通过 JS 的 .style 属性对元素的内联样式进行修改。示例如下：

// 获取要修改样式的元素
var elem = document.getElementById('myElem');

// 修改样式
elem.style.color = 'red';
elem.style.fontSize = '16px';

二、通过修改元素类名来设置样式

通常情况下，我们通过修改元素的类名来对元素的样式进行修改，因为这样能够把样式和结构隔离开来，便于后续的维护和修改。示例如下：

// 获取要修改样式的元素
var elem = document.getElementById('myElem');

// 修改类名
elem.className = 'newClass';

三、通过设置元素的class属性来设置样式

除了通过修改元素的类名来设置样式，我们还可以通过直接修改元素的 class 属性来实现。示例如下：

// 获取要修改样式的元素
var elem = document.getElementById('myElem');

// 修改class属性
elem.setAttribute('class', 'newClass');

四、通过样式对象来设置样式

在 DOM 中，每个元素的 style 属性实际上是一个对象，我们可以通过直接修改这个对象来修改元素的样式。示例如下：

// 获取要修改样式的元素
var elem = document.getElementById('myElem');

// 获取元素的 style 对象
var style = elem.style;

// 修改样式
style.color = 'red';
style.fontSize = '16px';

以上就是我对“JS设置CSS样式的方式汇总”的完整攻略，希望能够帮到你。