Esempio HTML:Aggiungere una classe a un div con javascript
<div id="foo" class="class_one"></div>
Come posso aggiungere la classe class_two
senza sostituire class_one
?
risultato finale:
<div id="foo" class="class_one class_two"></div>
Esempio HTML:Aggiungere una classe a un div con javascript
<div id="foo" class="class_one"></div>
Come posso aggiungere la classe class_two
senza sostituire class_one
?
risultato finale:
<div id="foo" class="class_one class_two"></div>
javascript standard:
document.getElementById('foo').className += ' class_two'
o JQuery:
$('#foo').addClass('class_two');
Si può usare jQuery.
$('#YourElement').addClass('YourClass'); //add
$('#YourElement').removeClass('YourClass'); //remove
$('#YourElement').toggleClass('YourClass'); //toggle
o JavaScript, se lo si desidera.
document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove
Questo è abbastanza pulito, non l'ho mai visto prima, è classList una nuova API?/compatibile con i browser più vecchi? –
Non li ho controllati su tutti i browser ma possono funzionare sui principali (ultimi) browser. – Lion
classList è disponibile sulla maggior parte dei browser moderni monhttp: //caniuse.com/#feat=classlist –
È possibile rendere la vita più facile con un paio di funzioni di supporto:
function addClass(el, className) {
var classes = el.className.match(/\S+/g) || [];
if (!hasClass(el, className)) {
classes.push(className);
}
el.className = classes.join(' ');
}
function hasClass(el, className) {
var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
return re.test(el.className);
}
addClass(document.getElementById('foo'), 'bar')
Controllare this per aggiungere una classe:
document.getElementById('foo').classList.add("class_two");
sento che questo è una soluzione migliore.
perfetto, grazie amico. – jared