Frage Ändern Sie die Klasse eines Elements mit JavaScript


Wie kann ich eine Klasse eines HTML-Elements als Antwort auf eine ändern? onClick Event mit JavaScript?


2286
2017-10-12 20:06


Ursprung


Antworten:


Moderne HTML5-Techniken für den Klassenwechsel

Moderne Browser haben hinzugefügt Klassenliste Hier finden Sie Methoden, mit denen Sie Klassen einfacher manipulieren können, ohne eine Bibliothek zu benötigen:

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

Leider funktionieren diese im Internet Explorer vor Version 10 nicht, obwohl es eine Unterlegscheibe um Unterstützung für IE8 und IE9 hinzuzufügen, verfügbar von diese Seite. Es wird jedoch immer mehr unterstützt.

Einfache browserübergreifende Lösung

Die Standard-JavaScript-Methode zum Auswählen eines Elements verwendet document.getElementById("Id"), was die folgenden Beispiele verwenden - Sie können natürlich Elemente auf andere Weise erhalten und in der richtigen Situation einfach verwenden this Statt dessen geht es jedoch über den Rahmen der Antwort hinaus.

Um alle Klassen für ein Element zu ändern:

Um alle vorhandenen Klassen durch eine oder mehrere neue Klassen zu ersetzen, legen Sie das Attribut className fest:

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

(Sie können eine durch Leerzeichen getrennte Liste verwenden, um mehrere Klassen anzuwenden.)

So fügen Sie einem Element eine zusätzliche Klasse hinzu:

Um eine Klasse zu einem Element hinzuzufügen, ohne vorhandene Werte zu entfernen / zu beeinflussen, fügen Sie ein Leerzeichen und den neuen Klassennamen wie folgt hinzu:

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

So entfernen Sie eine Klasse aus einem Element:

Um eine einzelne Klasse in ein Element zu entfernen, ohne andere potentielle Klassen zu beeinflussen, ist eine einfache Regex-Ersetzung erforderlich:

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

Eine Erklärung dieser Regex ist wie folgt:

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

Das g flag teilt dem Ersetzer mit, dass er bei Bedarf wiederholt werden soll, falls der Klassenname mehrfach hinzugefügt wurde.

Um zu überprüfen, ob eine Klasse bereits auf ein Element angewendet wurde:

Derselbe Regex, der oben für das Entfernen einer Klasse verwendet wurde, kann auch zur Überprüfung verwendet werden, ob eine bestimmte Klasse existiert:

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


Zuweisen dieser Aktionen zu onclick-Ereignissen:

Es ist zwar möglich, JavaScript direkt in die HTML-Ereignisattribute zu schreiben (z. B. onclick="this.className+=' MyClass'") Dies ist kein empfohlenes Verhalten. Insbesondere bei größeren Anwendungen wird durch die Trennung von HTML-Markup und JavaScript-Interaktionslogik mehr wartbarer Code erreicht.

Der erste Schritt, um dies zu erreichen, besteht darin, eine Funktion zu erstellen und die Funktion im onclick-Attribut aufzurufen, zum Beispiel:

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

(Es ist nicht erforderlich, dass dieser Code in Skript-Tags enthalten ist, dies dient lediglich der Kürze des Beispiels, und die Einbeziehung des JavaScript-Codes in eine andere Datei ist möglicherweise angemessener.)

Der zweite Schritt besteht darin, das onclick-Ereignis aus dem HTML heraus in JavaScript zu verschieben, zum Beispiel mit 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>

(Beachten Sie, dass der window.onload-Teil erforderlich ist, damit der Inhalt dieser Funktion ausgeführt wird nach Der HTML-Code wurde geladen. Ohne diesen Code ist die MyElement-Datei möglicherweise nicht vorhanden, wenn der JavaScript-Code aufgerufen wird, sodass die Zeile fehlschlägt.


JavaScript Frameworks und Bibliotheken

Der obige Code ist alles in Standard-JavaScript, jedoch ist es gängige Praxis, entweder ein Framework oder eine Bibliothek zu verwenden, um allgemeine Aufgaben zu vereinfachen, sowie von behobenen Fehlern und Kantenfällen zu profitieren, an die Sie beim Schreiben Ihres Codes möglicherweise nicht denken.

Während einige Leute es als Overkill betrachten, ein ~ 50 KB-Framework hinzuzufügen, um einfach eine Klasse zu ändern, wenn Sie eine beträchtliche Menge an JavaScript-Arbeit erledigen oder irgendetwas mit ungewöhnlichem Cross-Browser-Verhalten, ist es eine Überlegung wert.

(Sehr grob, eine Bibliothek ist eine Reihe von Tools für eine bestimmte Aufgabe, während ein Framework in der Regel mehrere Bibliotheken enthält und eine komplette Reihe von Aufgaben ausführt.)

Die obigen Beispiele wurden unten unter Verwendung von wiedergegeben jQuery, wahrscheinlich die am häufigsten verwendete JavaScript-Bibliothek (obwohl es auch andere gibt, die sich zu untersuchen lohnt).

(Beachten Sie, dass $ Hier ist das jQuery-Objekt.)

Klassen mit jQuery ändern:

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

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

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

Darüber hinaus bietet jQuery eine Verknüpfung zum Hinzufügen einer Klasse, wenn sie nicht angewendet wird, oder zum Entfernen einer Klasse, die Folgendes ausführt:

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


Zuweisen einer Funktion zu einem Klickereignis mit jQuery:

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

oder, ohne eine ID zu benötigen:

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



3293
2017-10-12 20:45



Du könntest auch einfach tun:

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

Und um eine Klasse umzuschalten (entferne, falls vorhanden, füge sie hinzu):

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

380
2017-08-05 17:44



In einem meiner alten Projekte, die jQuery nicht verwendet haben, habe ich die folgenden Funktionen zum Hinzufügen, Entfernen und Überprüfen von Element-Klassen erstellt:

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

Also, zum Beispiel, wenn ich onclick hinzufügen möchte, um eine Klasse die Schaltfläche zu verwenden, kann ich das verwenden:

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

Jetzt wäre es sicher besser, jQuery zu verwenden.


98
2018-05-28 07:32



Sie können verwenden node.className so:

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

Dies sollte nach IE5.5 und höher funktionieren PPK.


64
2017-10-12 20:33



Wow, überrascht, es gibt so viele Overkill-Antworten hier ...

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

46
2018-01-05 19:14



Verwenden von reinem JavaScript-Code:

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



Das funktioniert für mich:

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



Sie können auch das HTMLElement-Objekt erweitern, um Methoden zum Hinzufügen, Entfernen, Umschalten und Überprüfen von Klassen hinzuzufügen (Kern):

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

Und dann einfach so verwenden (beim Klicken wird die Klasse hinzugefügt oder entfernt):

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

Hier ist Demo.


16
2018-04-11 10:13



Um Informationen aus einem anderen beliebten Framework, Google Closures, hinzuzufügen, finden Sie deren Dom / Klassen Klasse:

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

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

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

Eine Option zur Auswahl des Elements ist die Verwendung goog.dom.query mit einem CSS3 Selektor:

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

15
2017-11-26 21:04



Ein paar kleinere Anmerkungen und Verbesserungen zu den vorherigen Regexen:

Sie sollten es global machen, falls die Klassenliste mehr als einmal den Klassennamen hat. Wahrscheinlich werden Sie auch die Leerzeichen an den Enden der Klassenliste entfernen und mehrere Leerzeichen in ein Leerzeichen konvertieren wollen, um Leerzeichen zu vermeiden. Keines dieser Dinge sollte ein Problem darstellen, wenn der einzige Code, der mit den Klassennamen übereinstimmt, den folgenden Regex verwendet und einen Namen entfernt, bevor er hinzugefügt wird. Aber. Nun, wer weiß, wer mit der Liste der Klassennamen zu tun hat.

Diese Regex unterscheidet nicht zwischen Groß- und Kleinschreibung, sodass Bugs in Klassennamen auftreten können, bevor der Code in einem Browser verwendet wird, der keine Groß- und Kleinschreibung in Klassennamen berücksichtigt.

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



Ändern Sie die CSS-Klasse eines Elements mit 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