Respuestas:
Use element.classList.add para agregar una clase:
element.classList.add("my-class");Y element.classList.remove para eliminar una clase:
element.classList.remove("my-class");Agregue un espacio más el nombre de su nueva clase a la classNamepropiedad del elemento. Primero, coloque un idelemento en el elemento para que pueda obtener fácilmente una referencia.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Entonces
var d = document.getElementById("div1");
d.className += " otherclass";Tenga en cuenta el espacio antes otherclass. Es importante incluir el espacio; de lo contrario, compromete las clases existentes que aparecen antes en la lista de clases.
Vea también element.className en MDN .
La forma más fácil de hacer esto sin ningún marco es usar el método element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Editar: y si desea eliminar la clase de un elemento,
element.classList.remove("otherclass");Prefiero no tener que agregar ningún espacio vacío y duplicar el manejo de entradas (lo cual es necesario cuando se usa el document.classNameenfoque). Existen algunas limitaciones del navegador , pero puede solucionarlas utilizando polyfills .
encuentre su elemento objetivo "d" como desee y luego:
d.className += ' additionalClass'; //note the spacepuede envolverlo en formas más inteligentes para verificar la preexistencia y verificar los requisitos de espacio, etc.
splitel nombre de clase en el espacio en blanco, elimine el que no desea de la matriz resultante, luego joinla matriz nuevamente ... o use element.classList.remove.
Compatible con cruz
En el siguiente ejemplo, agregamos classnamea al <body>elemento. Esto es compatible con IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Esto es una abreviatura de lo siguiente ...
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Actuación
Si está más preocupado por el rendimiento sobre la compatibilidad cruzada, puede acortarlo a lo siguiente, que es un 4% más rápido.
var z = document.body;
document.body.classList.add('wait');Conveniencia
Alternativamente, podría usar jQuery pero el rendimiento resultante es significativamente más lento. 94% más lento según jsPerf
$('body').addClass('wait');Actuación
Usar jQuery de forma selectiva es el mejor método para eliminar una clase si le preocupa el rendimiento
var a = document.body, c = ' classname';
$(a).removeClass(c);Sin jQuery es un 32% más lento
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) tendrá alguna diferencia de velocidad en comparación con la normal ( if (a.classList) { ....)?
classList.remove(). ¿Por qué no lo usaste? es mucho más rápido que jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListpara todo excepto para eliminar clases, es por eso que lo pregunto.
Otro enfoque para agregar la clase al elemento usando JavaScript puro
Para agregar clase:
document.getElementById("div1").classList.add("classToBeAdded");Para eliminar la clase:
document.getElementById("div1").classList.remove("classToBeRemoved");Cuando el trabajo que estoy haciendo no garantiza el uso de una biblioteca, uso estas dos funciones:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}if( cn.indexOf( classname ) != -1 ) { return; } Tenga en cuenta que si agrega la clase "btn" con la clase "btn-info" que ya está aquí, esto falla.
element.className.split(" ");para prevenir el problema @AlexandreDieulot reportado aquí.
Suponiendo que está haciendo más que solo agregar esta clase (por ejemplo, también tiene solicitudes asincrónicas, etc.), recomendaría una biblioteca como Prototype o jQuery .
Esto hará que todo lo que necesite hacer (incluido esto) sea muy simple.
Entonces, supongamos que tiene jQuery en su página ahora, podría usar un código como este para agregar un nombre de clase a un elemento (en carga, en este caso):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Consulte el navegador jQuery API para otras cosas.
Puede usar el método classList.add O classList.remove para agregar / eliminar una clase de un elemento.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")El código anterior agregará (y NO reemplazará) una clase "anyclass" a nameElem. Del mismo modo, puede usar el método classList.remove () para eliminar una clase.
nameElem.classList.remove("anyclss")Para agregar una clase a un elemento, sin eliminar / afectar los valores existentes, agregue un espacio y el nuevo nombre de clase, así:
document.getElementById("MyElement").className += " MyClass";Para reemplazar todas las clases existentes con una o más clases nuevas, establezca el atributo className:
document.getElementById("MyElement").className = "MyClass";(Puede usar una lista delimitada por espacios para aplicar varias clases).
Si no desea utilizar jQuery y desea admitir navegadores antiguos:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Sé que IE9 se apaga oficialmente y podemos lograrlo con la element.classListcantidad mencionada anteriormente, pero intenté aprender cómo funciona sin la classListayuda de muchas de las respuestas anteriores.
El siguiente código extiende muchas respuestas anteriores y las mejora al evitar agregar clases duplicadas.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');También creo que la forma más rápida es usar Element.prototype.classList como en es5: document.querySelector(".my.super-class").classList.add('new-class')
pero en ie8 no existe el elemento Element.prototype.classList, de todos modos puedes rellenarlo con este fragmento (puedes editarlo y mejorarlo) ):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}Solo para explicar lo que otros han dicho, varias clases de CSS se combinan en una sola cadena, delimitada por espacios. Por lo tanto, si desea codificarlo, simplemente se vería así:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Desde allí, puede derivar fácilmente el javascript necesario para agregar una nueva clase ... simplemente agregue un espacio seguido de la nueva clase a la propiedad className del elemento. Sabiendo esto, también puede escribir una función para eliminar una clase más tarde si surge la necesidad.
Para agregar, eliminar o verificar clases de elementos de una manera simple:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');Puede usar un enfoque moderno similar a jQuery
Si necesita cambiar solo un elemento, el primero que JS encontrará en DOM, puede usar esto:
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Tenga en cuenta dejar un espacio antes nombre de la clase.
Si tiene varias clases donde desea agregar una nueva clase, puede usarla así
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Creo que es mejor usar JavaScript puro, que podemos ejecutar en el DOM del navegador.
Aquí está la forma funcional de usarlo. He usado ES6, pero siéntase libre de usar ES5 y la función de expresión o definición de función, lo que se adapte a su JavaScript StyleGuide.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}Muestra con puro JS. En el primer ejemplo obtenemos la identificación de nuestro elemento y agregamos, por ejemplo, 2 clases.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})En el segundo ejemplo, obtenemos el nombre de la clase del elemento y agregamos 1 más.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Para aquellos que usan Lodash y desean actualizar la classNamecadena:
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()primero, dale una identificación al div. Luego, llame a la función appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>indexOfes una solución ingenua y ya tiene un problema señalado .
Puede usar el API querySelector para seleccionar su elemento y luego crear una función con el elemento y el nuevo nombre de clase como parámetros. Usando classlist para navegadores modernos, de lo contrario para IE8. Luego puede llamar a la función después de un evento.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'O:
document.getElementById('come_id').classList.add('someclassname')El primer enfoque ayudó a agregar la clase cuando el segundo enfoque no funcionó.
No olvides mantener un espacio frente a la' someclassname' primer enfoque.
Para la eliminación, puede usar:
document.getElementById('some_id').classList.remove('someclassname')Este código js me funciona
proporciona reemplazo de nombre de clase
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class namePara agregar solo use
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class namePara eliminar el uso
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameEspero que esto sea útil para sombody
element.classList.add("my-class")lugar.