js写css样式

JavaScript实现CSS样式的动态修改

在网页开发中，我们经常需要根据用户的操作或者页面的状态来动态地改变元素的样式，这时候，我们就可以使用JavaScript来实现这个功能，JavaScript是一种脚本语言，它可以在浏览器端运行，通过操作DOM（文档对象模型）来改变网页的结构和样式。

我们需要获取到需要修改样式的元素，在JavaScript中，我们可以使用document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()等方法来获取元素，如果我们想要获取id为"myDiv"的元素，我们可以这样做：

var myDiv = document.getElementById("myDiv");

我们就可以通过修改这个元素的style属性来改变它的样式，如果我们想要改变这个元素的背景颜色和字体大小，我们可以这样做：

myDiv.style.backgroundColor = "red";
myDiv.style.fontSize = "20px";

除了直接修改style属性，我们还可以使用CSSText属性来一次性修改多个样式，如果我们想要同时改变一个元素的背景颜色、字体颜色和字体大小，我们可以这样做：

myDiv.style.cssText = "background-color: red; color: white; font-size: 20px;";

我们还可以使用className属性来修改元素的类名，从而改变元素的样式，在HTML中，我们可以使用class属性来给元素添加类名，然后在CSS中定义这些类的样式，如果我们有一个id为"myDiv"的元素，我们给它添加了一个名为"highlight"的类，然后在CSS中定义了"highlight"类的样式：

<div id="myDiv" class="highlight">Hello, world!</div>

.highlight {
    background-color: yellow;
}

我们就可以使用JavaScript来修改这个元素的类名，从而改变它的样式：

myDiv.className = "highlight"; // 添加类名
myDiv.className = ""; // 删除类名

JavaScript提供了多种方式来动态地修改网页的样式，这使得我们可以创建出更加丰富和交互性的网页。