Ejemplo HTML:Añadir una clase a un DIV con javascript
<div id="foo" class="class_one"></div>
¿Cómo puedo añadir la clase class_two
sin reemplazar class_one
?
resultado final:
<div id="foo" class="class_one class_two"></div>
Ejemplo HTML:Añadir una clase a un DIV con javascript
<div id="foo" class="class_one"></div>
¿Cómo puedo añadir la clase class_two
sin reemplazar class_one
?
resultado final:
<div id="foo" class="class_one class_two"></div>
Javascript estándar:
document.getElementById('foo').className += ' class_two'
o JQuery:
$('#foo').addClass('class_two');
Usted puede usar jQuery.
$('#YourElement').addClass('YourClass'); //add
$('#YourElement').removeClass('YourClass'); //remove
$('#YourElement').toggleClass('YourClass'); //toggle
o JavaScript, si lo desea.
document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove
Eso es bastante limpio, nunca lo había visto antes, ¿es classList una nueva API?/compatible con navegadores más antiguos? –
No los he comprobado en todos los navegadores, pero pueden funcionar en los principales (últimos) navegadores. – Lion
classList está disponible en la mayoría de los navegadores modernos monhttp: //caniuse.com/#feat=classlist –
Puede hacer la vida más fácil con un par de funciones de ayuda:
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')
Comprobar this añadir una clase:
document.getElementById('foo').classList.add("class_two");
Siento que esto es una solución mejor.
perfecto, gracias amigo. – jared