在纯Javascript中按类隐藏元素

IT技术 javascript html
2021-03-12 15:31:48

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

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

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

4个回答

document.getElementsByClassName返回HTMLCollection与类名匹配的所有元素(一个类似数组的对象)。style属性被定义为Elementnot for 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';
我会去display而不是visibility
2021-05-07 15:31:48
fedeetz/Atanas Korchev 提供了更直接的回答 24AUG2013。首选。
2021-05-08 15:31:48
请注意,这只会隐藏类名为“appBanner”的第一个元素
2021-05-09 15:31:48
var appBanners = document.getElementsByClassName('appBanner');

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

JSFiddle。

我是 JS 初学者,但你为什么写, i;在第一行?这个用在for循环中?(但我们i稍后在循环中声明) 还是它的小错误?或者它的一些“最佳实践”?你能评论一下吗,请。
2021-04-24 15:31:48
@DenisSavenko -var声明由逗号分隔的多个变量是有效的语法,但在这种情况下循环中同时声明iwith是错误varfor- 尽管这实际上不会导致错误,但它只是不整洁。
2021-05-04 15:31:48
@DenisSavenko 它只是声明了第二个变量。
2021-05-12 15:31:48
可爱的回答兄弟...我喜欢它
2021-05-16 15:31:48
Array.filter( document.getElementsByClassName('appBanner'), function(elem){ elem.style.visibility = 'hidden'; });

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

仅供参考:Array.filter 不是 JS 函数。看起来这使用了 Mootools。
2021-04-27 15:31:48
`Array.Filter' 不适用于 Javascript
2021-04-28 15:31:48
<script type="text/javascript">
        $(document).ready(function(){

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

        });
    </script>

或者

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

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

        });
    </script>
OP 没有提到 jQuery
2021-05-12 15:31:48
<script> function myFunction() { var x = document.getElementById("left"); if (x.style.display === "none") { x.style.display = "block"; document.getElementsByClassName('sj-vm-filter')[0].style.visibility = 'visible'; } else { x.style.display = "none"; document.getElementsByClassName('sj-vm-filter')[0].style.visibility = '隐藏'; } } </脚本>
2021-05-21 15:31:48