Domanda Modifica la classe di un elemento con JavaScript


Come posso cambiare una classe di un elemento HTML in risposta a un onClick evento usando JavaScript?


2286
2017-10-12 20:06


origine


risposte:


Moderne tecniche HTML5 per cambiare classe

I browser moderni hanno aggiunto classList che fornisce metodi per facilitare la manipolazione delle classi senza bisogno di una libreria:

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

Sfortunatamente, questi non funzionano in Internet Explorer prima della v10, sebbene ci sia un shim per aggiungere il supporto per IE8 e IE9, disponibili da questa pagina. Tuttavia, sta diventando sempre di più supportato.

Semplice soluzione cross-browser

Sta utilizzando il modo standard JavaScript per selezionare un elemento document.getElementById("Id"), che è quello che usano i seguenti esempi: puoi ovviamente ottenere elementi in altri modi, e nella giusta situazione può semplicemente usarlo this invece - tuttavia, entrare nei dettagli su questo è oltre lo scopo della risposta.

Per cambiare tutte le classi per un elemento:

Per sostituire tutte le classi esistenti con una o più nuove classi, imposta l'attributo className:

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

(Puoi utilizzare un elenco delimitato da spazi per applicare più classi).

Per aggiungere una classe aggiuntiva a un elemento:

Per aggiungere una classe a un elemento, senza rimuovere / modificare i valori esistenti, aggiungi uno spazio e il nuovo nome di classe, in questo modo:

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

Per rimuovere una classe da un elemento:

Per rimuovere una singola classe in un elemento, senza influire su altre classi potenziali, è necessaria una semplice regex replace:

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

Una spiegazione di questa regex è la seguente:

(?:^|\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)

Il g contrassegna la sostituzione da ripetere secondo necessità, nel caso in cui il nome della classe sia stato aggiunto più volte.

Per verificare se una classe è già applicata a un elemento:

La stessa regex usata in precedenza per rimuovere una classe può anche essere usata come controllo per verificare se esiste una particolare classe:

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


Assegnazione di queste azioni agli eventi onclick:

Mentre è possibile scrivere JavaScript direttamente all'interno degli attributi dell'evento HTML (come ad esempio onclick="this.className+=' MyClass'") questo comportamento non è raccomandato. Soprattutto su applicazioni più grandi, il codice più gestibile si ottiene separando il markup HTML dalla logica di interazione JavaScript.

Il primo passo per raggiungere questo obiettivo è creare una funzione e richiamare la funzione nell'attributo onclick, ad esempio:

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

(Non è necessario avere questo codice nei tag script, questo è semplicemente per brevità di esempio, e includere il JavaScript in un file distinto potrebbe essere più appropriato.)

Il secondo passo è spostare l'evento onclick dall'HTML e in JavaScript, ad esempio utilizzando 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>

(Si noti che la parte window.onload è richiesta in modo che i contenuti di quella funzione siano eseguiti dopo l'HTML ha finito il caricamento - senza questo, il MyElement potrebbe non esistere quando viene chiamato il codice JavaScript, in modo che la linea fallirebbe.)


Quadri e librerie JavaScript

Il codice sopra riportato è tutto in JavaScript standard, tuttavia è pratica comune utilizzare un framework o una libreria per semplificare le attività comuni, oltre a trarre vantaggio da bug risolti e casi limite a cui non si potrebbe pensare quando si scrive il codice.

Mentre alcune persone considerano eccessivo utilizzare un framework di circa 50 KB per cambiare semplicemente una classe, se si sta facendo una quantità considerevole di lavoro JavaScript o qualsiasi cosa che potrebbe avere un comportamento insolito tra browser, vale la pena considerare.

(Molto approssimativamente, una libreria è un insieme di strumenti progettati per un'attività specifica, mentre un framework generalmente contiene più librerie ed esegue un set completo di funzioni.)

Gli esempi sopra sono stati riprodotti sotto usando jQuery, probabilmente la libreria JavaScript più comunemente usata (anche se ci sono altri che valgono la pena investigare).

(Nota che $ ecco l'oggetto jQuery.)

Modifica delle classi con jQuery:

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

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

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

Inoltre, jQuery fornisce una scorciatoia per aggiungere una classe se non si applica o rimuovere una classe che:

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


Assegnazione di una funzione a un evento click con jQuery:

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

o, senza bisogno di un ID:

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



3293
2017-10-12 20:45



Potresti anche solo fare:

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

E per attivare una classe (rimuovi se esiste un'altra possibilità aggiungila):

. Document.getElementById ( 'id') classList.toggle ( 'classe');

380
2017-08-05 17:44



In uno dei miei vecchi progetti che non utilizzava jQuery, ho creato le seguenti funzioni per aggiungere, rimuovere e verificare se l'elemento ha classe:

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

Quindi, per esempio, se desidero onclick aggiungere una classe, il pulsante posso usare questo:

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

Ormai di sicuro sarebbe meglio usare jQuery.


98
2018-05-28 07:32



Puoi usare node.className così:

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

Questo dovrebbe funzionare in IE5.5 e versioni successive PPK.


64
2017-10-12 20:33



Wow, sorpreso ci sono così tante risposte di overkill qui ...

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

46
2018-01-05 19:14



Usando puro codice JavaScript:

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



Questo funziona per me:

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



Potresti anche estendere l'oggetto HTMLElement, per aggiungere metodi per aggiungere, rimuovere, attivare e controllare le classi (nocciolo):

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

E poi usa solo questo (al clic aggiungerai o rimuovi classe):

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

Qui è dimostrazione.


16
2018-04-11 10:13



Solo per aggiungere informazioni da un altro framework popolare, Google Closures, vedi le loro dom / classes classe:

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

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

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

Si sta utilizzando un'opzione per la selezione dell'elemento goog.dom.query con un selettore CSS3:

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

15
2017-11-26 21:04



Un paio di note e ritocchi minori sulle regex precedenti:

Avrai voglia di farlo globalmente nel caso in cui l'elenco delle classi abbia il nome della classe più di una volta. E, probabilmente vorrete spogliare spazi dalle estremità dell'elenco classe e convertire più spazi in uno spazio per evitare di ottenere esecuzioni di spazi. Nessuna di queste cose dovrebbe essere un problema se l'unico codice che dinking con i nomi di classe usa la regex sottostante e rimuove un nome prima di aggiungerlo. Ma. Bene, chissà chi potrebbe stappare nella lista dei nomi delle classi.

Questa espressione regolare è insensibile alle maiuscole e minuscole, pertanto è possibile che vengano visualizzati errori nei nomi delle classi prima che il codice venga utilizzato su un browser che non si cura dei nomi dei casi nelle classi.

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



Modifica la classe CSS di un elemento con JavaScript in 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