Pregunta Cambiar la clase de un elemento con JavaScript


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


2286
2017-10-12 20:06


origen


Respuestas:


Técnicas HTML5 modernas para cambiar las clases

Los navegadores modernos han agregado Lista de clase 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 v10, aunque hay una calce para agregar soporte para IE8 e IE9, disponible desde esta página. Es, sin embargo, obtener más y más soportado.

Solución simple entre navegadores

La forma estándar de JavaScript para seleccionar un elemento está usando document.getElementById("Id"), que es lo que utilizan los siguientes ejemplos: por supuesto, puede obtener elementos de otras maneras, y en la situación correcta puede simplemente usar this en su lugar, sin embargo, entrar en detalles sobre esto 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 múltiples 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, de esta manera:

document.getElementById("MyElement").className += " MyClass";

Para eliminar una clase de un elemento:

Para eliminar una sola clase de un elemento, sin afectar a otras clases potenciales, se requiere una simple sustitución 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)

los g la bandera le dice al reemplazo que 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 usar como comprobación de si existe una clase en particular:

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


Asignando estas acciones para hacer clic en eventos:

Si bien es posible escribir JavaScript directamente dentro de los atributos de evento HTML (como onclick="this.className+=' MyClass'") esto no es un comportamiento recomendado. Especialmente en aplicaciones más grandes, se logra un código más fácil de mantener 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 de ejemplo, y puede ser más apropiado incluir el JavaScript en un archivo distinto).

El segundo paso es mover el evento onclick fuera del HTML y dentro de 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 se requiere la pieza window.onload para que se ejecuten los contenidos de esa función después el HTML ha terminado de cargarse; sin esto, MyElement podría no existir cuando se invoque el código JavaScript, por lo que esa línea fallaría).


Frameworks y Bibliotecas de JavaScript

El código anterior es todo en JavaScript estándar, sin embargo, es una práctica común utilizar un marco o una biblioteca para simplificar tareas comunes, así como beneficiarse de errores fijos y casos extremos en los que tal vez no pienses al escribir tu código.

Mientras que algunas personas consideran excesivo agregar un marco 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.

(Más o menos, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que un marco generalmente contiene múltiples bibliotecas y realiza un conjunto completo de tareas).

Los ejemplos anteriores se han reproducido a continuación usando jQuery, probablemente la biblioteca JavaScript más utilizada (aunque hay otras que también 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í lo hace:

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


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

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

o, sin necesidad de una identificación:

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



3293
2017-10-12 20:45



También podrías hacer:

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

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

document.getElementById ('id'). classList.toggle ('clase');

380
2017-08-05 17:44



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 hacer clic en onclick para agregar alguna clase, el 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.


98
2018-05-28 07:32



Puedes usar node.className al igual que:

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

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


64
2017-10-12 20:33



Guau, sorprendido de que haya tantas respuestas excesivas aquí ...

<div class="firstClass" onclick="this.className='secondClass'">

46
2018-01-05 19:14



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

40
2017-09-20 15:26



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

27
2017-12-08 09:36



También podría extender el objeto HTMLElement, para agregar métodos para agregar, eliminar, alternar y verificar clases (esencia)

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á manifestación.


16
2018-04-11 10:13



Solo para agregar información de otro marco popular, Google Closures, ver su Dom / Clases clase:

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 de CSS3:

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

15
2017-11-26 21:04



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

13
2018-05-02 04:59



Cambiar la clase de 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

12
2018-05-28 07:19