在纯Javascript中按类隐藏元素

Question

我尝试了以下代码,但它不起作用.知道我哪里出错了？

document.getElementsByClassName('appBanner').style.visibility='hidden';

<div class="appBanner">appbanner</div>

使用jQuery或更改HTML是不可能的,因为我[self->webView stringByEvaluatingJavaScriptFromString:@""];在Objective-C中使用.

Answer 1

document.getElementsByClassName返回HTMLCollection与类名匹配的所有元素的(类似数组的对象).该style属性的定义Element不适用于HTMLCollection.您应该使用括号(下标)表示法访问第一个元素.

document.getElementsByClassName('appBanner')[0].style.visibility = 'hidden';

更新了jsFiddle

要使用Selectors API更改与该类匹配的所有元素的样式规则:

[].forEach.call(document.querySelectorAll('.appBanner'), function (el) {
  el.style.visibility = 'hidden';
});

如果for...of可用:

for (let el of document.querySelectorAll('.appBanner')) el.style.visibility = 'hidden';

Answer 2

var appBanners = document.getElementsByClassName('appBanner');

for (var i = 0; i < appBanners.length; i ++) {
    appBanners[i].style.display = 'none';
}

的jsfiddle.