怎么用js添加css样式

JavaScript（JS）是一门非常强大的编程语言。它能够与HTML和CSS结合使用，实现动态网页效果。JS也能够通过添加CSS样式来改变HTML元素的样式。那么，怎么通过JS来添加CSS样式呢？下面是一个示例：

//获取需要修改样式的HTML元素var element = document.getElementById("myElement");
    //将CSS样式赋值给元素的style属性element.style.color = "red";
    element.style.fontSize = "20px";
    

在这个例子中，我们用JS获取了ID为"myElement"的HTML元素。然后，我们通过将需要改变的CSS样式赋值给元素的style属性，给这个元素设置了字体颜色为红色，字体大小为20像素。通过这种方式，我们可以使用JS来动态地改变HTML元素的样式。

除了直接将CSS样式赋值给元素的style属性，我们也可以通过JS来添加一个新的class，并将这个class添加到需要修改的HTML元素中，实现更新样式的目的。下面是一个将新class添加到HTML元素中的示例：

//获取需要修改样式的HTML元素var element = document.getElementById("myElement");
    //创建新classvar newClass = document.createElement("style");
newClass.innerHTML = "#myElement {
    color: red;
     font-size: 20px;
}
    ";
    //将新class添加到HTML页面中document.head.appendChild(newClass);
    //将新class添加到HTML元素中element.classList.add("newClass");
    

在这个例子中，我们首先获取了ID为"myElement"的HTML元素，然后创建一个新的class，设置了这个class的CSS样式。我们将这个新class添加到HTML页面中，并通过element.classList.add()将新class添加到需要修改样式的HTML元素中。通过这种方式，我们同样可以使用JS来动态地改变HTML元素的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！