Masquer un élément par classe en Javascript pur

Question

J'ai essayé le code suivant, mais il ne fonctionne pas . Une idée de l'endroit où je me suis trompé ?

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

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

Il n'est pas possible d'utiliser jQuery ou de modifier le code HTML car j'utilise [self->webView stringByEvaluatingJavaScriptFromString:@""]; en Objective-C.

Answer 1

document.getElementsByClassName renvoie un HTMLCollection (un objet de type tableau) de tous les éléments correspondant au nom de la classe. L'objet style est définie pour les Element pas pour HTMLCollection . Vous devez accéder au premier élément en utilisant la notation bracket(subscript).

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

Mise à jour de jsFiddle

Pour modifier les règles de style de tous les éléments correspondant à la classe, à l'aide de l'API Selectors :

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

Si for...of est disponible :

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'; });

Bifurqué @ http://jsfiddle.net/QVJXD/

Answer 4

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

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

        });
    </script>

ou

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

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

        });
    </script>