原生js如何修改css-猿码集

1. 前言

JavaScript是一门用来在网页中实现动态效果和交互功能的脚本语音，它可以修改页面中的HTML，也可以修改页面中元素的CSS。在本文中，我们将重点讨论如何使用原生JavaScript修改CSS。

在修改元素的CSS之前，我们需要先获取该元素。获取元素的方式有很多种，比如使用元素id、class、标签名等。这里我们以获取id为例。


//获取id为"box"的元素
var dom = document.getElementById("box");

获取到元素后，我们就可以对其CSS进行修改了。CSS有很多属性可以修改，比较常用的有：

color：字体颜色

background-color：背景颜色

font-size：字体大小

width、height：元素宽度、高度

margin、padding：外边距、内边距

以修改背景颜色为例：


var dom = document.getElementById("box");
dom.style.backgroundColor = "#f00";

以上代码将id为"box"的元素的背景颜色修改为红色。

如果要修改多个元素的CSS，我们需要先获取这些元素。与获取单个元素不同，获取多个元素需要使用类名或标签名。

根据类名获取


<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>


//获取所有类名为"item"的元素
var domList = document.getElementsByClassName("item");

以上代码将获取所有类名为"item"的元素，并将它们存储在一个类数组中。可以通过循环访问这个类数组，并对其中的每一个元素的CSS进行修改。

根据标签名获取


<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>


//获取所有标签名为"p"的元素
var domList = document.getElementsByTagName("p");

获取到元素列表后，我们需要对其中的每一个元素的CSS进行修改。可以通过循环访问元素列表，并使用上文提到的方式对每个元素的CSS进行修改。


var domList = document.getElementsByClassName("item");
for (var i = 0; i < domList.length; i++) {
  domList[i].style.backgroundColor = "#f00";
}

以上代码会将所有类名为"item"的元素的背景颜色修改为红色。

原生JavaScript提供了诸多修改CSS的方法。我们可以使用getElementById()、getElementsByClassName()、getElementsByTagName()等方法获取到需要修改的元素，再通过修改元素的style属性来修改这些元素的CSS。

当然，在实际开发中，我们更倾向于使用CSS类，将需要修改的CSS属性封装在一个CSS类中，然后使用JavaScript动态地切换这些CSS类。这种方式更具有可维护性和扩展性。

同时，在修改CSS时，我们也需要注意性能问题。如果要对大量元素的CSS进行修改，最好将这些元素保存在一个数组中，避免重复地对DOM进行访问，从而提高页面的性能。