首页js 动态修改css类名样式

js 动态修改css类名样式

时间: 2023-08-19 14:37:24 浏览: 91

可以使用 JavaScript 中的 `classList` 属性来动态修改 HTML 元素的 CSS 类名样式。示例代码如下： ```html <!DOCTYPE html> <html> <head> <style> .red { color: red; } .blue { color: blue; } </style> </head> <body> <p id="my-para" class="red">Hello World!</p> <button onclick="changeColor()">Change color</button> <script> function changeColor() { var para = document.getElementById("my-para"); if (para.classList.contains("red")) { para.classList.remove("red"); para.classList.add("blue"); } else { para.classList.remove("blue"); para.classList.add("red"); } } </script> </body> </html> ``` 在这个示例中，我们定义了两个 CSS 类名样式 `.red` 和 `.blue`，并将一个段落元素的初始类名设置为 `red`。当用户点击按钮时，会触发 `changeColor` 函数，该函数会检查段落元素的当前类名，然后将其修改为另一个类名，从而改变段落的文本颜色。

阅读全文