修改样式与 getElements - Javascript

在JavaScript中，我们可以通过使用getElementsBy系列方法来获取DOM元素，并通过修改它们的样式来改变网页的外观。这些方法返回一个包含匹配元素的节点列表，我们可以迭代该列表，对每个元素进行更改。

以下是一些常用的getElementsBy系列方法：

• getElementsByClassName(className)：返回指定类名的所有元素。
• getElementsByTagName(tagName)：返回指定标签名的所有元素。
• getElementsByName(name)：返回指定名称的所有元素。
• getElementById(id)：返回具有指定ID的元素。

一旦我们获取到元素，就可以使用元素的style属性来修改其样式。style属性是一个对象，包含了一系列用于修改元素样式的属性。

以下是一些常用的样式属性：

• backgroundColor：背景颜色。
• color：字体颜色。
• fontSize：字体大小。
• width：宽度。
• height：高度。
• display：显示方式。
• border：边框样式。

下面是一个示例代码，演示了如何使用getElementsByClassName方法修改元素的样式：

// 获取所有拥有"example"类名的元素
var elements = document.getElementsByClassName("example");

// 迭代每个元素，修改样式
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.style.backgroundColor = "red";
  element.style.color = "white";
  element.style.fontSize = "20px";
}

通过上述代码，所有具有"class"为"example"的元素将会背景颜色为红色，字体颜色为白色，字体大小为20像素。

这只是一个简单的示例，你可以根据实际需求使用不同的getElementsBy方法获取元素，并根据需要修改其样式。

希望这个简单介绍可以帮助你理解如何使用getElementsBy方法来修改元素样式。