html añadir una - Cambiar la clase de un elemento con JavaScript





12 Answers

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, si no, agregarlo):

document.getElementById('id').classList.toggle('class');
div propiedades css

¿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 hasta según PPK .




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



También podría extender el objeto HTMLElement para agregar métodos para agregar, eliminar, alternar y verificar las 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 así (al hacer clic, se agregará o eliminará la clase):

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

Aquí está la demo .




Un par de notas menores y retoques 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á eliminar los espacios de los extremos de la lista de clases y convertir varios espacios en un solo espacio para evitar la ejecución de espacios. Ninguna de estas cosas debería ser un problema si el único código que contiene los nombres de clase usa la expresión regular que se encuentra a continuación y elimina un nombre antes de agregarlo. Pero. Bueno, quién sabe quién podría estar usando 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 los casos 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, ' ') + "]");



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 debe llamar cuando se hace clic en un elemento de id -some-element . La función agrega el clic al 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 jQuery en su página para usar este código, pero al menos puede estar seguro de que la mayoría de las funciones en la biblioteca funcionarán en casi todos los navegadores modernos, y le ahorrará tiempo implementando Tu propio código para hacer lo mismo.

Gracias




Aquí está mi versión, en pleno funcionamiento:

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



Cambia la clase de un elemento en JavaScript de vainilla con el soporte de IE6

Puede intentar usar la propiedad de attributes nodo para mantener la compatibilidad con 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>




Solo pensé en tirar esto en:

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



Bien, creo que en este caso debería usar jQuery o escribir sus 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 lo necesito por otras razones.

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. similares a jQuery, esto es totalmente compatible con IE9 +, también mi código está escrito en ES6, por lo que necesita para asegurarnos de que su navegador lo admita o usted use algo como babel, de lo contrario debe usar la sintaxis de ES5 en su código, también de esta manera, encontramos 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 usarlos como se muestra a continuación, imagine que su elemento tiene id de 'id' y clase de 'clase', asegúrese de pasarlos como una cadena, puede usar la utilidad como se muestra a continuación:

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



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 .




Esto es más fácil con una biblioteca como jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>



Related