¿Cómo puedo cambiar la clase de un elemento con JavaScript?

2776

¿Cómo puedo cambiar una clase de un elemento HTML en respuesta a un onclickevento usando JavaScript?

Nathan Smith
fuente
28
"El atributo de clase se usa principalmente para apuntar a una clase en una hoja de estilo. Sin embargo, también puede ser usado por un JavaScript (a través del HTML DOM) para realizar cambios en elementos HTML con una clase específica". - w3schools.com/tags/att_standard_class.asp
Triynko
11
element.setAttribute(name, value); Reemplazar namecon class. Reemplace valuecon cualquier nombre que le haya dado a la clase, entre comillas. Esto evita la necesidad de eliminar la clase actual y agregar una diferente. Este ejemplo de jsFiddle muestra el código de trabajo completo.
Alan Wells
3
Para cambiar una clase de elemento HTML con onClick, use este código: <input type='button' onclick='addNewClass(this)' value='Create' /> y en la sección de JavaScript: function addNewClass(elem){ elem.className="newClass";} En línea
Iman Bahrampour
@Triynko - ese enlace en w3schools ha cambiado, parece en septiembre de 2012. Aquí está esa página en Archive.org del 12 / Sep / 2012: clase HTML Attribute-w3schools . Aquí está el enlace para la página de reemplazo en w3schools.com: Clase de HTML Attribute-w3schools .
Kevin Fegan

Respuestas:

3881

Técnicas HTML5 modernas para cambiar de clase

Los navegadores modernos han agregado classList que proporciona métodos para facilitar la manipulación de clases sin necesidad de una biblioteca:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Desafortunadamente, estos no funcionan en Internet Explorer antes de la versión 10, aunque hay una imitación para agregar soporte para IE8 e IE9, disponible en esta página . Sin embargo, es cada vez más compatible .

Solución simple de navegador cruzado

Se usa la forma estándar de JavaScript para seleccionar un elemento document.getElementById("Id"), que es lo que usan los siguientes ejemplos: por supuesto, puede obtener elementos de otras maneras, y en la situación correcta puede simplemente usarlo this, sin embargo, entrar en detalles al respecto está más allá del alcance de la respuesta

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

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 eliminar una clase de un elemento:

Para eliminar una sola clase de un elemento, sin afectar otras clases potenciales, se requiere un simple reemplazo de expresiones regulares:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Una explicación de esta expresión regular es la siguiente:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

El gindicador le dice al reemplazo que se repita según sea necesario, en caso de que el nombre de la clase se haya agregado varias veces.

Para verificar si una clase ya está aplicada a un elemento:

La misma expresión regular utilizada anteriormente para eliminar una clase también se puede utilizar para verificar si existe una clase en particular:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Asignación de estas acciones a eventos onclick:

Si bien es posible escribir JavaScript directamente dentro de los atributos del evento HTML (como onclick="this.className+=' MyClass'"), este no es un comportamiento recomendado. Especialmente en aplicaciones más grandes, se logra un código más mantenible separando el marcado HTML de la lógica de interacción de JavaScript.

El primer paso para lograr esto es crear una función y llamar a la función en el atributo onclick, por ejemplo:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(No es necesario tener este código en las etiquetas de script, esto es simplemente por brevedad, e incluir el JavaScript en un archivo distinto puede ser más apropiado).

El segundo paso es mover el evento onclick fuera del HTML y en JavaScript, por ejemplo usando addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Tenga en cuenta que la parte window.onload es necesaria para que el contenido de esa función se ejecute después de que el HTML haya terminado de cargarse; sin esto, MyElement podría no existir cuando se llama al código JavaScript, por lo que la línea fallaría).


Marcos y bibliotecas de JavaScript

El código anterior está todo en JavaScript estándar, sin embargo, es una práctica común usar un marco o una biblioteca para simplificar las tareas comunes, así como beneficiarse de errores fijos y casos extremos que quizás no piense al escribir su código.

Si bien algunas personas consideran que es excesivo agregar un marco de trabajo de ~ 50 KB para simplemente cambiar una clase, si está haciendo una cantidad considerable de trabajo de JavaScript, o cualquier cosa que pueda tener un comportamiento inusual entre navegadores, vale la pena considerarlo.

(En términos generales, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que un marco generalmente contiene varias bibliotecas y realiza un conjunto completo de tareas).

Los ejemplos anteriores se han reproducido a continuación utilizando jQuery , probablemente la biblioteca JavaScript más utilizada (aunque también hay otros que vale la pena investigar).

(Tenga en cuenta que $aquí está el objeto jQuery).

Cambio de clases con jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Además, jQuery proporciona un acceso directo para agregar una clase si no se aplica, o eliminar una clase que sí:

$('#MyElement').toggleClass('MyClass');


Asignación de una función a un evento click con jQuery:

$('#MyElement').click(changeClass);

o, sin necesidad de una identificación:

$(':button:contains(My Button)').click(changeClass);


Peter Boughton
fuente
105
Gran respuesta Peter. Una pregunta ... ¿por qué es mejor hacerlo con JQuery que con Javascript? JQuery es genial, pero si esto es todo lo que necesita hacer, ¿qué justifica incluir toda la biblioteca JQuery en lugar de algunas líneas de JavaScript?
mattstuehler
23
@mattstuehler 1) la frase "mejor aún x" a menudo significa "mejor aún (puedes) x". 2) Para llegar al meollo del asunto, jQuery está diseñado para ayudar a acceder / manipular el DOM, y muy a menudo si necesita hacer este tipo de cosas una vez que tiene que hacerlo por todas partes.
Barry
31
Un error con esta solución: cuando hace clic en su botón varias veces, agregará la Clase de "MyClass" al elemento varias veces, en lugar de verificar si ya existe. Por lo tanto, podría terminar con un atributo de clase HTML similar a este:class="button MyClass MyClass MyClass"
Web_Designer
35
Si está tratando de eliminar una clase 'myClass' y tiene una clase 'prefix-myClass', la expresión regular que proporcionó anteriormente para eliminar una clase lo dejará con 'prefix-' en su className: O
jinglesthula
16
Wow, tres años y 183 votos a favor y nadie lo vio hasta ahora. Gracias jinglesthula, he corregido la expresión regular para que no elimine incorrectamente partes de los nombres de clase. // Supongo que este es un buen ejemplo de por qué vale la pena usar un Framework (como jQuery): los errores como este se detectan y corrigen antes, y no requieren cambios en el código normal.
Peter Boughton
422

También podrías simplemente hacer:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Y para alternar una clase (eliminar si existe, agregarla):

document.getElementById('id').classList.toggle('class');
Tyilo
fuente
63
Creo que esto depende de HTML5.
John
12
Necesitarás la classListcuña de Eli Grey .
ELLIOTTCABLE
15
Mozilla Developer Network afirma que no funciona, de forma nativa, en Internet Explorers menores de 10. Creo que la afirmación es cierta en mis pruebas. Aparentemente, la cuña Eli Gray es necesaria para Internet Explorer 8-9. Desafortunadamente, no pude encontrarlo en su sitio (incluso con la búsqueda). La cuña está disponible en el enlace de Mozilla.
doubleJ
44
atow "classList" tiene soporte parcial en IE10 +; no es compatible con Opera Mini; más soporte completo en los navegadores estándar restantes: caniuse.com/#search=classlist
Nick Humphrey
119

En uno de mis proyectos anteriores que no usaba jQuery, construí las siguientes funciones para agregar, eliminar y verificar si el elemento tiene clase:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Entonces, por ejemplo, si quiero onclickagregar alguna clase al botón, puedo usar esto:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Por ahora seguro que sería mejor usar jQuery.

Andrew Orsich
fuente
8
Esto es ideal para cuando su cliente no le permite usar jQuery. (Porque terminas casi construyendo tu propia biblioteca.)
Mike
1
@Mike Si el cliente no le permite usar jQuery, ¿no podría simplemente revisar y reconstruir solo las características que necesitaba en su propia biblioteca?
kfrncs
55
@kfrncs Porque generalmente no necesito un marco tan grande. Para el proyecto en el que estaba pensando, las únicas funciones que necesitaba eran las 3 funciones de nombre de clase (tiene, agrega, elimina) y las funciones de cookie (tiene, agrega, elimina). Todo lo demás era personalizado o con soporte nativo. Entonces, todo junto era solo 150 líneas antes de minificar, incluidos los comentarios.
Mike
2
Amigo, son las 4am y muchas gracias. Vanilla JS es lo que usamos en mi proyecto y esto fue un salvavidas.
LessQuesar
Esta es mi solución favorita para esto. Lo uso en todas partes. Creo que es la forma más elegante de agregar y eliminar clases cuando su proyecto aún no tiene otra forma de hacerlo.
WebWanderer
77

Puedes usar node.classNameasí:

document.getElementById('foo').className = 'bar';

Esto debería funcionar en IE5.5 y versiones posteriores de acuerdo con PPK .

Eric Wendelin
fuente
11
esto sobrescribiría cualquiera y todas las demás clases en el objeto ... por lo que no es tan simple.
Eric Sebasta
51

Wow, sorprendido de que haya tantas respuestas exageradas aquí ...

<div class="firstClass" onclick="this.className='secondClass'">
Travis J
fuente
14
Yo diría Javascript discreta es terrible práctica para escribir código de ejemplo ...
Gabe
22
No estaría de acuerdo, porque creo que el código de ejemplo debería ser un buen ejemplo.
thomasrutter
1
Un buen ejemplo debería instruir y despertar la imaginación al mismo tiempo. No debe reemplazar el pensamiento, sino inspirarlo.
Anthony Rutledge
44
Las otras respuestas no son excesivas, también mantienen las clases existentes en el elemento.
gcampbell
47

Usando código JavaScript puro:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}
PseudoNinja
fuente
33

Esto es trabajo para mí:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
Gopal Krishna Ranjan
fuente
Excelente respuesta! Solo queda agregar: configure para cada nombre de clase CSS para el selector para especificar un estilo para un grupo de elementos de clase
Roman Polen.
Esto funciona para mí en FF, pero cuando intenté usar el.className = "newStyle"; no funcionó, ¿por qué?
Lukasz 'Severiaan' Grela
1
Puedes usar el.setAttribute('class', newClass)o mejor el.className = newClass. Pero no el.setAttribute('className', newClass).
Oriol
20

Además, puede extender el objeto HTMLElement para agregar métodos para agregar, eliminar, alternar y verificar clases ( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

Y luego simplemente use así (al hacer clic agregará o eliminará la clase):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Aquí está la demostración .

moka
fuente
1
este es un poco detallado ... aquí hay una solución muy sucinta ... jsfiddle.net/jdniki/UaT3P
zero_cool
55
Lo siento @Jackson_Sandland, pero has perdido totalmente el punto, que es no usar jQuery en absoluto.
moka
17

Solo para agregar información de otro marco popular, Google Closures, vea su clase dom / classes :

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Una opción para seleccionar el elemento es usar goog.dom.query con un selector CSS3:

var myElement = goog.dom.query("#MyElement")[0];
Ben Flynn
fuente
14

Un par de notas menores y ajustes en las expresiones regulares anteriores:

Querrá hacerlo globalmente en caso de que la lista de clases tenga el nombre de la clase más de una vez. Y, probablemente querrá quitar espacios de los extremos de la lista de clases y convertir múltiples espacios en un espacio para evitar obtener tiradas de espacios. Ninguna de estas cosas debería ser un problema si el único código que utiliza los nombres de clase utiliza la expresión regular a continuación y elimina un nombre antes de agregarlo. Pero. Bueno, quién sabe quién podría estar cenando con la lista de nombres de clase.

Esta expresión regular no distingue entre mayúsculas y minúsculas, por lo que los errores en los nombres de clase pueden aparecer antes de que el código se use en un navegador que no se preocupa por mayúsculas y minúsculas en los nombres de clase.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
Alex Robinson
fuente
13

Cambiar la clase CSS de un elemento con JavaScript en ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub
Hiren Kansara
fuente
13

Usaría jQuery y escribiría algo como esto:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Este código agrega una función a la que se llama cuando se hace clic en un elemento de la identificación algún elemento . La función agrega clics al atributo de clase del elemento si aún no es parte de él, y lo elimina si está allí.

Sí, debe agregar una referencia a la biblioteca jQuery en su página para usar este código, pero al menos puede estar seguro de que la mayoría de las funciones de la biblioteca funcionarían en casi todos los navegadores modernos, y le ahorrará tiempo implementando tu propio código para hacer lo mismo.

Gracias

shingokko
fuente
8
Solo tiene que escribir jQueryen su forma larga una vez. jQuery(function($) { });pone a $disposición dentro de la función en todos los casos.
ThiefMaster
10

La línea

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

debiera ser:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
Eric Bailey
fuente
8
Incorrecto. El RegEx está delimitado por las barras diagonales. Agregar comillas hace que falle en IE, devolviendo la cadena de la clase que está tratando de eliminar en lugar de eliminar realmente la clase.
Dylan
9

Cambiar la clase de un elemento en JavaScript vainilla con soporte para IE6

Puede intentar usar la attributespropiedad de nodo para mantener la compatibilidad con los navegadores antiguos, incluso IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>

Eugene Tiurin
fuente
8

Aquí está mi versión, totalmente funcional:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Uso:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
Alfredo
fuente
44
Eso interrumpirá la clase foobarsi intentas eliminar la clase foo. El JS en los atributos del controlador de eventos intrínsecos se rompió antes de ser editado. La respuesta aceptada de 4 años es mucho mejor.
Quentin
1
gracias, lo arreglé (no es el problema del prefijo). Es la vieja respuesta aceptada que tiene un error con la expresión regular.
alfred
El código todavía tiene el foobarproblema. Vea la prueba aquí
rosell.dk
8

Aquí hay una clase toggle para alternar / agregar / eliminar una clase en un elemento:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

ver jsfiddle

También vea mi respuesta aquí para crear una nueva clase dinámicamente

kofifus
fuente
6

Utilizo las siguientes funciones JavaScript de vainilla en mi código. Usan expresiones regulares y indexOfno requieren comillas especiales en las expresiones regulares.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

También puede usar element.classList en los navegadores modernos.

Salman A
fuente
3

LAS OPCIONES.

Aquí hay un pequeño ejemplo de estilo frente a classList para que veas cuáles son las opciones que tienes disponibles y cómo usarlas classListpara hacer lo que quieres.

style vs. classList

La diferencia entre styley classListes que con styleque está añadiendo a las propiedades de estilo del elemento, pero classListestá controlando un poco las clase (s) del elemento ( add, remove, toggle, contain), voy a mostrar cómo utilizar el addy removemétodo ya que esos son Los populares.


Ejemplo de estilo

Si desea agregar margin-toppropiedades a un elemento, lo haría de la siguiente manera:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Ejemplo de classList

Vamos a decir que tenemos una <div class="class-a class-b">, en este caso, tenemos 2 clases añadidas a nuestro elemento div ya, class-ay class-b, y queremos controlar qué clases removey qué clase add. Aquí es donde se classListvuelve útil.

Eliminar class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Añadir class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Farhad
fuente
1

Solo pensé en tirar esto:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}
StackSlave
fuente
1

solo dígalo a myElement.classList="new-class"menos que necesite mantener otras clases existentes, en cuyo caso puede usar los classList.add, .removemétodos.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

Ronnie Royston
fuente
1

OK, creo que en este caso deberías usar jQuery o escribir tus propios métodos en javascript puro, mi preferencia es agregar mis propios métodos en lugar de inyectar todo jQuery en mi aplicación si no lo necesito por otras razones.

Me gustaría hacer algo como a continuación como métodos para mi marco de JavaScript para agregar algunas funcionalidades que manejan agregar clases, eliminar clases, etc. similar a jQuery, esto es totalmente compatible con IE9 +, también mi código está escrito en ES6, por lo que necesita para asegurarse de que su navegador lo admita o que use algo como babel, de lo contrario, debe usar la sintaxis ES5 en su código, también de esta manera, buscamos el elemento a través de ID, lo que significa que el elemento debe tener una ID para seleccionar:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

y simplemente puede llamar a usarlos como se muestra a continuación, imagine que su elemento tiene una identificación de 'id' y una clase de 'clase', asegúrese de pasarlos como una cadena, puede usar la utilidad de la siguiente manera:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
Alireza
fuente
1

classList API DOM:

Una forma muy conveniente de agregar y eliminar clases es la classListAPI DOM. Esta API nos permite seleccionar todas las clases de un elemento DOM específico para modificar la lista usando javascript. Por ejemplo:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

Podemos observar en el registro que estamos recuperando un objeto no solo con las clases del elemento, sino también con muchos métodos y propiedades auxiliares. Este objeto hereda de la interfaz DOMTokenList , una interfaz que se utiliza en el DOM para representar un conjunto de tokens separados por espacios (como las clases).

Ejemplo:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  

Willem van der Veen
fuente
1

Sí, hay muchas formas de hacer esto. En la sintaxis de ES6 podemos lograrlo fácilmente. Use este código para alternar entre agregar y quitar clases.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

Danés Khan
fuente
1
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

El uso de la respuesta aceptada anteriormente aquí es una función simple de navegador cruzado para agregar y eliminar clases

agregar clase:

classed(document.getElementById("denis"), "active", true)

eliminar clase:

classed(document.getElementById("denis"), "active", false)
donatso
fuente
1

Muchas respuestas, muchas buenas respuestas.

TL; DR:

document.getElementById('id').className = 'class'

O

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Eso es.

Y, si realmente quieres saber por qué y educarte, te sugiero que leas la respuesta de Peter Boughton , es perfecto.

Nota:
Esto es posible con ( documento o evento ):

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()
tfont
fuente
1

Hay una propiedad className en javascript para cambiar el nombre de la clase de un elemento HTML. El valor de clase existente será reemplazado por el nuevo, que ha asignado en className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Crédito: https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

Jai Prakash
fuente
1

La pregunta OP fue ¿Cómo puedo cambiar la clase de un elemento con JavaScript?

Los navegadores modernos le permiten hacer esto con una línea de javascript :

document.getElementById('id').classList.replace('span1','span2')

El classListatributo proporciona una DOMTokenList que tiene una variedad de métodos . Puede operar en la lista de clases de un elemento utilizando manipulaciones simples como add () , remove () o replace () . O obtenga clases muy sofisticadas y manipule como si fuera un objeto o un mapa con claves () , valores () , entradas ()

La respuesta de Peter Boughton es excelente, pero ahora tiene más de una década. Todos los navegadores modernos ahora admiten DOMTokenList: consulte https://caniuse.com/#search=classList e incluso IE11 admite algunos métodos DOMTokenList

timbo
fuente
1

tratar

element.className='second'

Kamil Kiełczewski
fuente
-2

Código de trabajo de JavaScript:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Puede descargar un código de trabajo desde este enlace .

Sajid
fuente
1
Esto romperá elementos con más de una clase.
gcampbell
-4

Aquí hay un simple código jQuery para hacer eso.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Aquí,

  • Class1 es un oyente para un evento.
  • La clase padre es la clase que aloja la clase que desea cambiar.
  • Classtoremove es la clase anterior que tienes.
  • La clase para agregar es la nueva clase que desea agregar.
  • 100 es el tiempo de espera durante el cual se cambia la clase.

Buena suerte.

uttamcafedeweb
fuente