使用JavaScript一次更改具有相同类名的多个元素的样式,可以通过以下方法实现:
document.getElementsByClassName
方法获取具有相同类名的所有元素,然后遍历这些元素,分别更改它们的样式。示例代码:
var elements = document.getElementsByClassName("myClassName");
for (var i = 0; i< elements.length; i++) {
elements[i].style.color = "red";
elements[i].style.fontSize = "16px";
}
document.querySelectorAll
方法获取具有相同类名的所有元素,然后遍历这些元素,分别更改它们的样式。示例代码:
var elements = document.querySelectorAll(".myClassName");
for (var i = 0; i< elements.length; i++) {
elements[i].style.color = "red";
elements[i].style.fontSize = "16px";
}
Array.from
方法将NodeList
类型的元素列表转换为数组,然后使用forEach
方法遍历数组,分别更改每个元素的样式。示例代码:
Array.from(document.getElementsByClassName("myClassName")).forEach(function(element) {
element.style.color = "red";
element.style.fontSize = "16px";
});
Array.from
方法将NodeList
类型的元素列表转换为数组,然后使用map
方法遍历数组,分别更改每个元素的样式。示例代码:
Array.from(document.querySelectorAll(".myClassName")).map(function(element) {
element.style.color = "red";
element.style.fontSize = "16px";
});
以上方法都可以实现一次更改具有相同类名的多个元素的样式。
领取专属 10元无门槛券
手把手带您无忧上云