Nascondi elemento per classe in puro Javascript

Question

Ho provato il seguente codice, ma è doesn't work. Qualche idea su dove ho sbagliato?

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

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

utilizzando jQuery o cambiare il codice HTML non è possibile, come io sto usando [self->webView stringByEvaluatingJavaScriptFromString:@""]; in Objective-C.

Answer 1

document.getElementsByClassName restituisce un HTMLCollection (un oggetto di tipo array) di tutti gli elementi che corrispondono al nome della classe. La proprietà style è definita per Element non per HTMLCollection. Dovresti accedere al primo elemento usando la notazione parentesi (pedice).

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

Updated jsFiddle

Per modificare le regole di stile di tutti gli elementi che corrispondono alla classe, utilizzando l'API selettori:

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

Se for...of è disponibile:

for (let el of document.querySelectorAll('.appBanner')) el.style.visibility = 'hidden'; 

Answer 2

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

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

biforcuta @http://jsfiddle.net/QVJXD/

Answer 4

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

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

     }); 
    </script> 

o

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

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

     }); 
    </script>