Come getElementByClass invece di GetElementById con JavaScript?

Question 1

Sto cercando di attivare o disattivare la visibilità di alcuni elementi DIV su un sito Web a seconda della classe di ciascun DIV. Sto usando uno snippet JavaScript di base per attivarli. Il problema è che lo script utilizza solo getElementById, poiché getElementByClassnon è supportato in JavaScript. E sfortunatamente devo usare class e non id per nominare i DIV perché i nomi DIV sono generati dinamicamente dal mio foglio di stile XSLT utilizzando determinati nomi di categoria.

So che ora alcuni browser supportano getElementByClass , ma poiché Internet Explorer non lo fa, non voglio seguire quella strada.

Ho trovato script che utilizzano funzioni per ottenere elementi per classe (come il n. 8 in questa pagina: http://www.dustindiaz.com/top-ten-javascript/ ), ma non riesco a capire come integrarli con il mio script toggle.

Ecco il codice HTML. Gli stessi DIV mancano poiché vengono generati al caricamento della pagina con XML / XSLT.

Domanda principale: come posso ottenere lo script Toggle sottostante per ottenere Element by Class invece di ottenere Element by ID?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>

Question 2

I browser moderni supportano document.getElementsByClassName. Puoi vedere la ripartizione completa di quali fornitori forniscono questa funzionalità su caniuse . Se stai cercando di estendere il supporto ai browser meno recenti, potresti prendere in considerazione un motore di selezione come quello che si trova in jQuery o un polyfill.

Risposta più vecchia

Ti consigliamo di controllare in jQuery , che consentirà quanto segue:

$(".classname").hide(); // hides everything with class 'classname'

Google offre un file sorgente jQuery ospitato, così puoi farvi riferimento ed essere attivo in pochi istanti. Includi quanto segue nella tua pagina:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Question 3

Il getElementsByClassNamemetodo è ora supportato nativamente dalle versioni più recenti di Firefox, Safari, Chrome, IE e Opera, potresti creare una funzione per verificare se è disponibile un'implementazione nativa, altrimenti usa il metodo Dustin Diaz:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Utilizzo:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

Question 4

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Solitamente utilizzando getElementsByClassName, restituisce un array di più classi. Perché lo stesso nome di classe potrebbe essere utilizzato in più di un'istanza all'interno della stessa pagina HTML. Usiamo l'ID dell'elemento dell'array per indirizzare la classe di cui abbiamo bisogno, nel mio caso, è la prima istanza del nome della classe specificato. Quindi ho usato [0]

Question 5

Usalo per accedere alla classe in Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Question 6

aggiungendo alla risposta di CMS , questo è un approccio più generico di quello toggle_visibilityche ho appena usato:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Question 7

La mia soluzione:

Per prima cosa crea i tag "<style>" con un ID.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Quindi, creo una funzione in JavaScript come questa:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Ha funzionato benissimo per me.

Question 8

Aggiungi ID alla dichiarazione della classe

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";