一、使用 javascript 修改元素的样式
在 html 中，我们可以通过给元素添加 css 样式来美化页面。而在 javascript 中，可以通过修改元素的属性来实现动态修改样式的效果。
使用元素的 style 属性我们可以利用 html 元素的 style 属性来直接修改元素的样式。这个方式适用于需要修改单个元素的样式。
示例代码：
<div id="box" style="background-color: green;">我是一段文本</div>
在 javascript 中，可以通过获取元素的 style 属性来动态修改其样式：
var box = document.queryselector('#box');box.style.backgroundcolor = 'red';
通过 javascript 修改其样式后，元素的样式就会变为红色。
使用元素的 style 元素另一种动态修改元素样式的方式是使用元素的 style 元素。style 元素可以让我们在 javascript 中直接访问元素的样式表，并修改其样式。
示例代码：
<div id="box"></div><style> #box { background-color: green; }</style>
在 javascript 中，可以通过获取元素的 style 属性来获取其 style 元素，然后动态修改其样式：
var box = document.queryselector('#box');var styles = box.style;// 修改样式styles.backgroundcolor = 'red';
通过 javascript 修改其样式后，元素的样式就会变为红色。
二、使用 classlist 修改样式
上面介绍的两种方式适用于需要修改单个元素的样式，如果我们需要随意控制网页上的多个元素的样式，那么这两种方式就显得太麻烦了。此时，我们可以使用 classlist 属性来动态修改样式。
添加和删除 classclasslist 属性包含了许多方便的方法，可以让我们轻松地添加和删除 class。通过 class，我们可以为元素定义一组样式，并通过 javascript 动态地添加或删除它们。
示例代码：
<div class="box">我是一段文本</div>
在 javascript 中，可以通过 classlist 的 add() 和 remove() 方法来为元素添加或删除 class：
var box = document.queryselector('.box');box.classlist.add('red');box.classlist.remove('box');
通过 javascript 修改其样式后，元素的样式就会变为红色，并且元素的 box class 就会被删除。
切换 class除了 add() 和 remove() 方法，classlist 还有一个方便的方法是 toggle()。toggle() 方法可以切换元素的 class，如果元素已经存在该 class，则该方法会删除该 class，否则将会添加该 class。
示例代码：
<div class="box">我是一段文本</div>
在 javascript 中，可以通过 classlist 的 toggle() 方法来切换元素的 class：
var box = document.queryselector('.box');box.classlist.toggle('red');box.classlist.toggle('green');
通过 javascript 修改其样式后，元素的样式就会由红色变为绿色。
三、直接修改样式表
上述方法可以控制单个元素或多个元素的样式，但是如果需要直接修改样式表，则需要使用不同的方法。
在 javascript 中，样式表表示为一个对象，我们可以通过 javascript 代码动态地修改其中的样式，从而实现样式表的动态修改。
示例代码：
<style> .box { background-color: green; }</style><div class="box">我是一段文本</div>
在 javascript 中，可以通过获取样式表对应的对象来动态修改其样式：
var stylesheet = document.stylesheets[0];var rules = stylesheet.cssrules || stylesheet.rules;for (var i = 0; i < rules.length; i++) { var rule = rules[i]; if (rule.selectortext === '.box') { rule.style.backgroundcolor = 'red'; }}
通过 javascript 修改其样式后，元素的样式就会变为红色。
四、总结
本文介绍了三种动态修改 css 样式的方法，包括使用元素的 style 属性、使用元素的 style 元素、使用 classlist。另外，为了实现直接修改样式表的需求，我们还介绍了直接修改样式表的方法。这些方法可以让我们在 javascript 中轻松地实现动态修改 css 样式的功能。
以上就是js动态修改css的详细内容。