使用 querySelector 获取所有包含 class 的元素

Question

为了改变 class 中的某些样式，我使用 querySelector():

el.querySelector('.fa fa-car').style.display = "none";

这对一个元素工作正常，但如果有更多元素包含这个 class 并且我想将所有元素的显示更改为 none，则此命令只会删除第一次出现的它让下一个保持不变。

我试着用 querySelectorAll():

 el.querySelectorAll('.fa fa-car').style.display = "none";

但是这个returns一条错误信息：

html2canvas: TypeError: Cannot set property 'display' of undefined

关于如何获取包含特定 class 的所有元素并对它们执行操作的任何想法？

Answer 1

querySelector只有select一个元素，到select所有元素都可以使用querySelectorAll

[].map.call(el.querySelectorAll('.fa fa-car'), n => { n.style.display = 'none'; })

Answer 2

使用方法querySelectorAll() 参见 https://www.w3schools.com/jsref/met_document_queryselectorall.asp

您遇到错误是因为 querySelectorAll returns 一个 array.Iterate 在它上面然后使用 style.display

Answer 3

querySelectorAll()returns元素集合。要更改它们的样式，您需要遍历它们。

另请注意，您的 selector 似乎无效。鉴于 FontAwesome class 规则，我认为您需要 select 两个 classes。试试这个：

Array.from(el.querySelectorAll('.fa.fa-car')).forEach(function() {
  this.style.display = "none";
});

或者，当您用 jQuery 标记问题时，您可以将所有内容简化为：

$('.fa.fa-car').hide();

Answer 4

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

使用Document.querySelectorAll()获取所有元素。然后使用forEach()在每个元素中设置样式：

var elList = document.querySelectorAll('.fa.fa-car');
elList.forEach(el => el.style.display = "none");

请注意：一些旧版本的 IE (<8) 将不支持 querySelectorAll()。在那种情况下使用

Array.from(document.querySelectorAll('.fa.fa-car'))

Answer 5

您可以通过迭代此 class 的出现来完成所有操作，当然还可以借助一些 if 子句。

$('.fa.fa-car').each(function(){
     $(this).css('color','white');
})

使用 querySelector 获取所有包含 class 的元素

Get all elements containing a class with querySelector

javascript

css-selectors

html2canvas