Question

我想更改所有'p'元素的颜色，我尝试使用此代码完成此操作，但是它不起作用。

document.getElementsByTagName('p').forEach(element => {
 element.style.color = 'white'
});

是否有正确的方法（不使用JQuery）？

Answer 1

您可以使用原始的JavaScript ES2015（ES6）代码来完成此操作。

document.querySelectorAll('p').forEach(e => e.style.color = "white");

更新：

我忘了提到这是在 DOM 中应用白色的元素的方式，效率不高，因此您也可以采用另一种方式。

CSS：

.white {
  color: #fff;
}

JavaScript：

// If you have just one class for the element
document.querySelectorAll('p').forEach(e => e.className = 'white');

// If you are appending the class of `white`
document.querySelectorAll('p').forEach(e => e.className += ' white');

Answer 2

您无法遍历HTMLCollection返回的getElementsByTagName。不过，将其转换为Array也可以。使用Array.from()执行此操作：

Array.from(document.getElementsByTagName('p')).forEach(element => { element.style.color = 'white' });

Answer 3

您可以这样做

var list= document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
    list[i].style.color = "white";
}

由于document.getElementsByTagName返回的 HTMLCollection 类型对象，您必须按照this答案使用上述方法进行迭代

Answer 4

您要做的只是做一个简单的循环。

let el = document.getElementsByTagName('p')
let i

for (i = 0; i < el.length; i++) {
    el[i].style.color = 'white'
}

Answer 5

document.getElementsByTagName('p')

返回HTMLCollection(6) [p, p, p, p, p, p.left]，这是一个HTML集合。因此，如果您检查

document.getElementsByTagName('p') instanceof Array

它返回false。

由于HTML集合不是数组的集合，因此您无法执行.forEach()。

因此，您必须使用Array.from()将其转换为数组。

Array.from()方法创建一个新的浅复制Array实例来自类似数组或可迭代对象的对象。

Array.from(document.getElementsByTagName('p')).forEach(element => {
 element.style.color = 'white'
});

这就是解决您问题的方法。

JS更改所有“ p”颜色

5 个答案: