Cambiar la clase de un elemento con JavaScript



Answers

También podrías hacer:

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

Y para alternar una clase (eliminar si existe más, agréguela):

document.getElementById('id').classList.toggle('class');
Question

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




Puedes usar node.className así:

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

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




De acuerdo, creo que en este caso debes 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 a mi aplicación si no la necesito por otros motivos.

Me gustaría hacer algo como a continuación como métodos para mi marco 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 soporte o de que use algo como babel; de lo contrario, debe usar la sintaxis ES5 en su código, también de esta manera, encontraremos elemento a través de ID, lo que significa que el elemento debe tener una identificación para ser seleccionado:

//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 puedes llamar usarlos como se muestra a continuación, imagina que tu elemento tiene id de 'id' y clase de 'clase', asegúrate de pasarlos como una cadena, puedes usar el utilizador como se muestra a continuación:

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



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



Sin ánimo de ofender, no está de más cambiar la clase sobre la marcha, ya que obliga al intérprete de CSS a volver a calcular la presentación visual de toda la página web.

La razón es que es casi imposible para el intérprete de CSS saber si se puede cambiar cualquier herencia o cascada, por lo que la respuesta breve es:

¡Nunca cambie className on-the-fly! -)

Pero generalmente solo necesitará cambiar una propiedad o dos, y eso se implementa fácilmente:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}



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 que se llamará cuando se haga clic en un elemento del id de algún elemento . La función agrega hace clic en el atributo de clase del elemento si aún no es parte de él, y lo elimina si está allí.

Sí, necesita agregar una referencia a la biblioteca de 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án en casi todos los navegadores modernos y le ahorrará tiempo de implementación. tu propio código para hacer lo mismo.

Gracias




Código JavaScript de trabajo:

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




Desde here : here

Al hacer clic en acción, puede intentar usar:

reemplazar (oldClass, newClass)
Reemplaza una clase existente con una nueva clase.

Ex:

var myDiv = document.getElementById('myElement'); 
myDiv.classList.contains('myCssClass');
myDiv.classList.replace("myCssClass", "myCssClass_new");



Aquí hay un toggleClass 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 veo mi respuesta here para crear una nueva clase dinámicamente




Aquí hay un código jQuery simple 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 principal es la clase que aloja la clase que desea cambiar
  • Classtoremove es la clase anterior que tienes.
  • Clase para agregar es la nueva clase que desea agregar.
  • 100 es el tiempo de espera de retraso durante el cual se cambia la clase.

Buena suerte.




Se puede hacer.

HTML:

<div class="red" id="text">
<a href="#" onclick="changeClass();">Fahad</a>
</div>

CSS:

.red a{
  color:red;
}
.black a{
  color:black;
}

JavaScript:

function changeClass(){
document.getElementById("text").className = "black";
}

Fiddle .




También podría 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 solo use esto (al hacer clic se agregará o eliminará la clase):

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

Aquí está la demo .




Este es uno agradable que encontré útil.

function classChangeFn() {
        document.getElementById("MyElement").className = "";
    }

window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click' , classChangeFn );
    }



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 es probable que desee quitar espacios de los extremos de la lista de clases y convertir varios espacios en un espacio para evitar la ejecución de espacios. Ninguna de estas cosas debería ser un problema si el único código que dinking con 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 dinking con la lista de nombres de clase.

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

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, ' ') + "]");



Aquí está mi versión, trabajando completamente:

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



Related