首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JavaScript一次更改具有相同类名的多个元素的样式?

使用JavaScript一次更改具有相同类名的多个元素的样式,可以通过以下方法实现:

  1. 使用document.getElementsByClassName方法获取具有相同类名的所有元素,然后遍历这些元素,分别更改它们的样式。

示例代码:

代码语言:javascript
复制
var elements = document.getElementsByClassName("myClassName");
for (var i = 0; i< elements.length; i++) {
  elements[i].style.color = "red";
  elements[i].style.fontSize = "16px";
}
  1. 使用document.querySelectorAll方法获取具有相同类名的所有元素,然后遍历这些元素,分别更改它们的样式。

示例代码:

代码语言:javascript
复制
var elements = document.querySelectorAll(".myClassName");
for (var i = 0; i< elements.length; i++) {
  elements[i].style.color = "red";
  elements[i].style.fontSize = "16px";
}
  1. 使用Array.from方法将NodeList类型的元素列表转换为数组,然后使用forEach方法遍历数组,分别更改每个元素的样式。

示例代码:

代码语言:javascript
复制
Array.from(document.getElementsByClassName("myClassName")).forEach(function(element) {
  element.style.color = "red";
  element.style.fontSize = "16px";
});
  1. 使用Array.from方法将NodeList类型的元素列表转换为数组,然后使用map方法遍历数组,分别更改每个元素的样式。

示例代码:

代码语言:javascript
复制
Array.from(document.querySelectorAll(".myClassName")).map(function(element) {
  element.style.color = "red";
  element.style.fontSize = "16px";
});

以上方法都可以实现一次更改具有相同类名的多个元素的样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券