在纯Javascript中按类隐藏元素[重复]答案

【问题标题】：Hide element by class in pure Javascript [duplicate]在纯Javascript中按类隐藏元素[重复]
【发布时间】：2013-08-27 04:29:26
【问题描述】：

我尝试了以下代码，但它是doesn't work。知道我哪里出错了吗？

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

&lt;div class="appBanner"&gt;appbanner&lt;/div&gt;

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

【问题讨论】：

getElementsByClassName 返回一个元素数组。您需要类似： document.getElementsByClassName('appBanner')[0].style.visibility='hidden';

标签： javascript html

【解决方案1】：

document.getElementsByClassName 返回与类名匹配的所有元素的HTMLCollection（类似数组的对象）。 style 属性是为 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';

【讨论】：

fedeetz/Atanas Korchev 提供了更直接的答案 24AUG2013。首选。
请注意，这只会隐藏第一个类名为“appBanner”的元素
我会选择display 而不是visibility

【解决方案2】：

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

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

JSFiddle.

【讨论】：

我是 JS 的初学者，但为什么你在第一行写 , i;？这用于for循环？（但我们稍后在循环中声明i）还是小错误？或者也许它的一些“最佳实践”？请您发表评论。
@DenisSavenko 它只是在声明第二个变量。
@DenisSavenko - 声明多个用逗号分隔的变量是有效的var 语法，但在这种情况下，also 用@987654327 声明i 是错误的@ 在for 循环中 - 虽然这实际上不会导致错误，但它只是不整洁。
可爱的答案兄弟...我喜欢它

【解决方案3】：

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

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

【讨论】：

仅供参考：Array.filter 不是 JS 函数。看起来这使用了 Mootools。
`Array.Filter' 不适用于 Javascript

【解决方案4】：

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

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

        });
    </script>

或

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

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

        });
    </script>

【讨论】：

OP没有提到jQuery