Html 在纯Javascript中按类隐藏元素

Hide element by class in pure Javascript

提问by Harry

I have tried the following code, but it doesn't work. Any idea where I have gone wrong?

我已经尝试了以下代码，但它不起作用。知道我哪里出错了吗？

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

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

Using jQuery or changing the HTML is not possible as I am using [self->webView stringByEvaluatingJavaScriptFromString:@""];in Objective-C.

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

回答by c.P.u1

document.getElementsByClassNamereturns an HTMLCollection(an array-like object) of all elements matching the class name. The styleproperty is defined for Elementnot for HTMLCollection. You should access the first element using the bracket(subscript) notation.

document.getElementsByClassName返回HTMLCollection与类名匹配的所有元素的（一个类似数组的对象）。该style属性被定义为Elementnot for HTMLCollection。您应该使用括号（下标）表示法访问第一个元素。

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

Updated jsFiddle

更新了 jsFiddle

To change the style rules of all elements matching the class, using the Selectors API:

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

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

If for...ofis available:

如果for...of可用：

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

回答by federico-t

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

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

JSFiddle.

JSFiddle。

回答by servermanfail

Array.filter( document.getElementsByClassName('appBanner'), function(elem){ elem.style.visibility = 'hidden'; });

Forked@http://jsfiddle.net/QVJXD/

分叉@ http://jsfiddle.net/QVJXD/

回答by Ali Güzel

<script type="text/javascript">
        $(document).ready(function(){

                $('.appBanner').fadeOut('slow');

        });
    </script>

or

或者

<script type="text/javascript">
        $(document).ready(function(){

                $('.appBanner').hide();

        });
    </script>