1190

Tengo un elemento que ya tiene una clase:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Ahora quiero crear una función de JavaScript que agregará una clase a div(no reemplazar, pero agregar).

¿Cómo puedo hacer eso?

javascript css dom-manipulation Blankman
fuente

99

Para cualquiera que lea este hilo en 2020 o posterior, omita el antiguo método className y úselo en su element.classList.add("my-class")lugar.

Pikamander2

1922

Si solo se dirige a los navegadores modernos:

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");

Si necesita admitir Internet Explorer 9 o inferior:

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 .

Ismael
fuente

26

Si el único trabajo en toda la página que debe hacerse con JavaScript es esta adición de nombre de clase, entonces sí. Pero no puedo ver que esta sea la única parte dinámica de la página. Una biblioteca ayudará con todo lo demás también. A 30-50kb, jQuery no es un éxito que valga la pena discutir.

rfunduk 03 de

167

"Una biblioteca ayudará con todo lo demás también" - aparte de aprender JavaScript

meouw

19

¿Qué tiene que ver agregar una clase a un elemento DOM con el aprendizaje del idioma? document.getElementById ('div1'). className es tanto un problema relacionado con la biblioteca como el uso de jQuery para hacer lo mismo. La pregunta era "¿cómo puedo hacer eso?", Una biblioteca completamente probada es la respuesta sensata.

rfunduk 03 de

66

@thenduks: ¡Estoy seguro de que sabes que JavaScript! == jQuery. Es bueno que las respuestas a esta pregunta incluyan soluciones bibliotecarias y no bibliotecarias porque es importante saber cómo funcionan las cosas, no solo la forma más sencilla de lograrlas. Se dará cuenta de esta pregunta es marcada con javascript

meouw

2

@meouw: estoy de acuerdo contigo. Sin embargo, jQuery está escrito en JavaScript, por lo que mantengo que mencionar al OP que una biblioteca es una buena idea no es "empujar un marco hacia abajo". Eso es todo.

rfunduk

1352

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 .

Yuri
fuente

67

Es una pena que esto no sea compatible antes de IE 10.0 porque es una característica excelente y la solución más fácil para un problema que encuentro a menudo.

mricci

12

Un polyfill para classList está disponible.

wcandillon

10

element.classList docs en MDN.

willlma

11

Este parece ser el mejor para usar, ya que los que tienen espacio al menos se sienten como hacks, no para agregar clases ...

Silver Ringvee

55

@SilverRingvee Un riesgo adicional del enfoque espacial es que algún otro desarrollador podría no saber que es vital y eliminarlo para limpiar las cosas.

akauppi

178

encuentre su elemento objetivo "d" como desee y luego:

d.className += ' additionalClass'; //note the space

puede envolverlo en formas más inteligentes para verificar la preexistencia y verificar los requisitos de espacio, etc.

annakata
fuente

¿Y para eliminar usando este método?

DeathGrip

3

@DeathGrip simplemente establece la clase de nuevo en un solo nombre definido d.className = 'originalClass';

TheTechy

@TheTechy: si tiene más de una clase que necesita mantener (lo que sucede mucho en estos días), eso no funcionará.

Mark Schultheiss el

1

Para eliminar la forma antigua, 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.

Stijn de Witt

131

Agregar clase

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');
```

Eliminar la clase

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;

Referencias

Usando prototipo

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Usando YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

davidcondrey
fuente

Wow, gracias :) ¿La versión abreviada ( a.classList ? ...) tendrá alguna diferencia de velocidad en comparación con la normal ( if (a.classList) { ....)?

Wilf

55

Ahí está classList.remove(). ¿Por qué no lo usaste? es mucho más rápido que jQuery jsperf.com/remove-class-vanilla-vs-jquery

Fez Vrasta

@FezVrasta classList no es compatible antes de IE 10, que todavía tiene una participación de mercado decente (+ 13% en netmarketshare.com).

Adam

66

@ Adam lo usó classListpara todo excepto para eliminar clases, es por eso que lo pregunto.

Fez Vrasta

@FezVrasta Bajo compatibilidad cruzada Utilicé .add () pero solo después de verificar si está disponible, hense compatible con cruz . Para eliminar no me molesté en repetirme, así que no incluí tantas opciones.

davidcondrey

33

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");

Shoaib Chikate
fuente

44

Eso ya ha sido respondido varias veces por otros usuarios, incluidas las discusiones sobre el soporte del navegador y las cuñas.

bafromca

@bafromca No vi que se dio la respuesta anterior y es mi error. Puede marcar esta respuesta

Shoaib Chikate,

3

@ShoaibChikate: también puede eliminar la respuesta si lo desea (conservará los puntos). Solo trato de reducir el desorden en esta pregunta; totalmente de usted.

Dan Dascalescu

22

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;
}

meouw
fuente

15

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.

Alexandre Dieulot

1

debe usar element.className.split(" ");para prevenir el problema @AlexandreDieulot reportado aquí.

Amir Fo

20

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.

rfunduk
fuente

15

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")

sjv
fuente

muy agradable, pero no es compatible con IE <= 9 o Safari <= 5.0 ... :( ( caniuse.com/classlist )

simon

1

Esto ya se ha discutido , incluido el soporte del navegador.

Dan Dascalescu

10

Para agregar una clase adicional a un elemento:

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 cambiar todas las clases para un elemento:

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).

Mes.
fuente

6

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);
}

Ferran Maylinch
fuente

5

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');

Yuvaraj
fuente

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
	})
}

Expandir fragmento

asdru
fuente

4

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.

Misko
fuente

4

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');

Marcos Fernández Ramos
fuente

4

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>

Expandir fragmento

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>

Expandir fragmento

Vladimir Jovanović
fuente

3

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)
  }
}

Expandir fragmento

bvmCoder
fuente

2

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";
})

Vasyl Gutnyk
fuente

1

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()

Dakota del Sur
fuente

0

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>

Tehvan
fuente

1

reemplazará la clase no se agrega! Tal vez falta una línea o una clase antigua + "" + classToAppend en lugar de la última claseToAppend

Vinze

indexOfes una solución ingenua y ya tiene un problema señalado .

Dan Dascalescu

0

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');

KevinOrfas
fuente

Esto ya se ha discutido , junto con el soporte del navegador.

Dan Dascalescu

0

Más corto

image1.parentNode.className+=' box';

Mostrar fragmento de código

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Expandir fragmento

Kamil Kiełczewski
fuente

0

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')

Athira V Ajit
fuente

-4

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 name

Para 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 name

Para 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 name

Espero que esto sea útil para sombody

Luego
fuente

-9

En YUI, si incluye yuidom , puede usar

YAHOO.util.Dom.addClass('div1','className');

HTH

Alagu
fuente

12

Decía JavaScript, no jQuery o YUI.

Radek

¿Cómo agrego una clase a un elemento dado?

Respuestas:

Si solo se dirige a los navegadores modernos:

Si necesita admitir Internet Explorer 9 o inferior:

Agregar clase

Eliminar la clase

Referencias

Usando prototipo

Usando YUI

Para agregar una clase adicional a un elemento:

Para cambiar todas las clases para un elemento:

Más corto