javascript - 純粋な Javascript でクラスごとに要素を非表示にする

Question

次のコードを試しましたが、うまくいきません。私がどこで間違ったのか分かりますか？

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

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

[self->webView stringByEvaluatingJavaScriptFromString:@""];Objective-Cで使用しているため、jQueryを使用したり、HTMLを変更したりすることはできません。

Answer 1

document.getElementsByClassNameHTMLCollectionクラス名に一致するすべての要素の (配列のようなオブジェクト) を返します。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。

Answer 3

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

フォーク@ http://jsfiddle.net/QVJXD/

Answer 4

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

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

        });
    </script>

また

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

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

        });
    </script>