在纯Javascript中按类隐藏元素

时间:2013-08-24 02:41:53

标签: javascript html

我尝试过以下代码,但doesn't work。知道我哪里出错了吗?

document.getElementsByClassName('appBanner').style.visibility='hidden';
<div class="appBanner">appbanner</div>

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

4 个答案:

答案 0 :(得分:82)

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

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

<强> Updated 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';

答案 1 :(得分:28)

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

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

JSFiddle.

答案 2 :(得分:0)

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

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

答案 3 :(得分:-4)

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

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

        });
    </script>

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

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

        });
    </script>