1

recorro a los expertos para que me orienten un poco ya le dado muchas vueltas y no logro conseguirlo, resulta que tengo una tipo de publicación en wordpres necesito cambiar un div class

<div class="content"> </div> 

a

<div class="content2"> </div> 

intente de la siguiente manera

document.getElementsByClassName("content").classList.add('content2');

pero no tengo logro hacer el cambio

necesito que este cambio se realice a la hora de cargar la pagina.

3
  • excelente tu respuesta muchas gracias, sin embargo no logro eliminar content, queda de la siguiente manera: <div class="content content2"></div>, estoy realizando las pruebas desde la consola del navegador, en la respuesta muestra: undefined, alguna sugerencia?, gracias de nuevo..
    – user117732
    Commented el 18 may. 2021 a las 1:58
  • lo siento por el inconveniente, necesito procesarlo a la hora de cargar la pagina...
    – user117732
    Commented el 18 may. 2021 a las 2:00
  • Si bien estas con los motodos remove/add, también podrías utilizar el método toggle de classList que lo que hace es remover si lo tiene o agregar la clase si no la tiene (o sea alterna la clase). También es útil en determinas circunstancias. Dale una mirada Commented el 18 may. 2021 a las 2:23

2 respuestas 2

1

1) Guardar en una variable el elemento

var element = document.getElementsByClassName('content')[0].classList;

2) Remover la clase deseada

element.remove('content')

3) Añadir la nueva clase

element.add('content2')
4
  • excelente función tal como debería, muchas gracias amigo.
    – user117732
    Commented el 18 may. 2021 a las 2:13
  • Me alegra que haya solucionado tu problema, si lo consideras podrías marcar la respuesta como respuesta aceptada o útil para indicar a los demás usuarios que tengas la misma dificultad que ha solucionado la pregunta. Saludos.
    – Alan
    Commented el 18 may. 2021 a las 5:02
  • @Triby es porque la variable element no es un elemento sino la referencia classList (mira en la asignacion) Commented el 18 may. 2021 a las 16:06
  • @JoseA.Fernandez, cierto, no me fijé en la asignación. :-p
    – Triby
    Commented el 18 may. 2021 a las 16:15
1

Si bien lo podemos realizar con jQuery, con Javascript podriamos utilizar querySelectorAll y toggle de classList

Si bien utilizas los métodos remove/add de classList , también podrías utilizar el método toggle de classList que lo que hace es remover si lo tiene o agregar la clase si no la tiene (o sea alterna la clase). También es útil en determinas circunstancias. Dale una mirada. Además también puedas pasarle un "evaluador" como segundo parámetro . También podrías utilizar el método querySelectorAll que esta en la mayoría de los browser actuales (puedes mirar "Can I Use") donde puedes enviar un selector al igual que jQuery pero no con todos los "superpoderes"

Ejemplo:

function changeCssClassVersion2() {
  var elemFirst = document.querySelectorAll('[class*="content"]')[0];

  elemFirst.classList.toggle('content');
  elemFirst.classList.toggle('content2');
 }

Lo ideal seria que el código sea mas genérico, es decir no que vaya directo al primer elemento sino que itere en todo lo que se "encontró" con el selector. Quedaría algo así:

function changeCssClassVersion2() {
  var elements = document.querySelectorAll('[class*="content"]');
  
  for (const i = 0; i < elements.length; i++) 
  {
    var elem = elements[i];
    elem.classList.toggle('content');
    elem.classList.toggle('content2');
  }
}

Puedes probarlo en el siguiente ejemplo sencillo

function changeCssClassVersion1() {
  var elemFirst = document.getElementsByClassName('content')[0];
  
  elemFirst.classList.remove("content");
  elemFirst.classList.add('content2');
}

function changeCssClassVersion2() {
  var elements = document.querySelectorAll('[class*="content"]');
  
  for (const i = 0; i < elements.length; i++) 
  {
    var elem = elements[i];
    elem.classList.toggle('content');
    elem.classList.toggle('content2');
  }
}

var btn = document.getElementById('btn');

btn.addEventListener('click', changeCssClassVersion2, false);
.content {
  background: #0084ff;
  color: #fff;
}

.content2 {
  background: #ff0000;
  color: #fff;
}
<div class="content"> Starwars</div> 
<button id="btn">Change Css Class</button>

Espero que te sirva de ayuda o guía

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.