Aggiungi classe per un elemento

Question

provo a scrivere questi codice per rendere visualizzazione a griglia attraverso i CSS :(jsbin)

var tables = document.getElementsByClassName('tableData'); 
    var rows = tables[0].getElementsByTagName('tr'); 
for(var i=1; i<rows.length; i +=2) { 
    alert(rows[i]); 
    rows[i].className = "alt"; 
} 

questo funziona solo con gli elementi tr ha class="". Ma se voglio aggiungere la classe a tr. Ho provato Core.addClass ma non funziona.

Answer 1

Prova rows[i].className += " alt";

Answer 2

Questo dovrebbe funzionare anche quando l'attributo non è già presente:

rows[i].setAttribute("class", "alt"); 

http://www.w3schools.com/Dom/met_element_setattribute.asp

Answer 3

si potrebbe desiderare di utilizzare un framework Javascript. Risulta che Firefox e Internet Explorer hanno entrambi approcci diversi per l'aggiunta di nomi di classi.

Per Firefox, credo che quello che dovete fare

element.setAttribute('class','<className>'); 

mentre in IE, si può fare

element.className='<className>'; 

EDIT

Si scopre che Firefox supporta l'attributo element.className . Tuttavia, Internet Explorer non capisce element.setAttribute('class'...). Devi fare element.setAttribute('className'...) se vuoi usare la chiamata della funzione setAttribute.

jQuery forniscono un'interfaccia in cui si può fare

$(element).addClass('<className>'); 

e si prende cura di tutte le ambiguità del browser. Sono inoltre disponibili le funzioni removeClass() e hasClass() per la gestione e il test degli attributi di classe.

Quindi nel tuo scenario, faresti:

var tables = document.getElementsByClassName('tableData'); 
var rows = tables[0].getElementsByTagName('tr'); 
for(var i=1; i<rows.length; i +=2) { 
    // alert(rows[i]); 
    $(rows[i]).addClass("alt"); 
} 

Nota che si potrebbe semplificare questo ulteriormente con più funzionalità jQuery.

Answer 4

Questo sarà solo aggiungere il nome della classe, se non esiste già

var classToAdd = 'alt'; 
if (rows.className.length == 0) 
{ 
    rows.className = classToAdd; 
} 
else if (rows.className.indexOf(classToAdd) < 0) 
{ 
    rows.className += ' ' + classToAdd; 
} 

Answer 5

Due anni dopo (2012/06), c'è un nuovo e brillante approccio - element.classList con metodi add(), remove(), toggle() , .

rows[i].classList.add("alt"); 

supportate da

• Chrome 8+
• Firefox 3.6+
• Internet Explorer 10+
• Opera 11.50+
• Safari 5.1+