ändern - javascript klasse hinzufügen




Ändern Sie die Klasse eines Elements mit JavaScript (17)

Wie kann ich eine Klasse eines HTML-Elements als Reaktion auf ein onClick Ereignis mithilfe von JavaScript onClick ?


Ändern Sie die Klasse eines Elements in Vanilla-JavaScript mit Unterstützung von IE6

Sie können versuchen, die Node- attributes Eigenschaft zu verwenden, um die Kompatibilität mit alten Browsern und sogar IE6 aufrechtzuerhalten:

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>


Moderne HTML5-Techniken zum Ändern von Klassen

Moderne Browser haben classList hinzugefügt, die Methoden bereitstellt, mit denen Klassen leichter classList werden können, ohne dass eine Bibliothek erforderlich ist:

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 in Internet Explorer vor Version 10 nicht, obwohl es eine Möglichkeit gibt, IE8 und IE9 zu unterstützen, die auf classList verfügbar sind. Es wird jedoch immer mehr supported .

Einfache Browserübergreifende Lösung

Die Standard-JavaScript-Methode zur Auswahl eines Elements ist document.getElementById("Id") this ist, was in den folgenden Beispielen verwendet wird. Sie können Elemente natürlich auch auf andere Weise erhalten. In der richtigen Situation können Sie this stattdessen einfach verwenden. diesbezügliche Eingriffe gehen über die Antwort hinaus.

So ändern Sie alle Klassen für ein Element:

Um alle vorhandenen Klassen durch eine oder mehrere neue Klassen zu ersetzen, legen Sie das className-Attribut 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 einem Element eine Klasse hinzuzufügen, ohne vorhandene Werte zu entfernen oder 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 zu einem Element zu entfernen, ohne andere potenzielle Klassen zu beeinflussen, ist ein einfacher Regex-Ersetzen 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 lautet 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 Flag g dass das Ersetzen wiederholt werden muss, falls der Klassenname mehrmals hinzugefügt wurde.

So prüfen Sie, ob eine Klasse bereits auf ein Element angewendet wurde:

Derselbe Regex, der oben zum 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 wird jedoch nicht empfohlen. Insbesondere bei größeren Anwendungen wird durch die Trennung von HTML-Markup und JavaScript-Interaktionslogik ein wartungsfähigerer Code erzielt.

Der erste Schritt dazu ist das Erstellen einer Funktion und das Aufrufen der Funktion im onclick-Attribut. 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 ist lediglich der Kürze halber als Beispiel gedacht. Das Einschließen von JavaScript in eine andere Datei ist möglicherweise geeigneter.)

Der zweite Schritt besteht darin, das onclick -Ereignis aus dem HTML-Code in JavaScript zu verschieben, beispielsweise 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, nachdem das Laden des HTML-Codes abgeschlossen ist. Andernfalls ist das MyElement 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 enthalten. Es ist jedoch üblich, entweder ein Framework oder eine Bibliothek zu verwenden, um allgemeine Aufgaben zu vereinfachen und von behobenen Fehlern und Randfällen zu profitieren, an die Sie beim Schreiben des Codes nicht denken.

Während einige Leute es für übertrieben halten, ein ~ 50 KB-Framework für das einfache Ändern einer Klasse hinzuzufügen, ist die Verwendung von JavaScript oder etwas, das ungewöhnliches Cross-Browser-Verhalten zeigt, eine Überlegung wert.

(In groben Zügen handelt es sich bei einer Bibliothek um eine Reihe von Tools, die für eine bestimmte Aufgabe entwickelt wurden, während ein Framework im Allgemeinen mehrere Bibliotheken enthält und eine Reihe von Aufgaben ausführt.)

Die obigen Beispiele wurden im Folgenden mit jQuery reproduziert, wahrscheinlich der am häufigsten verwendeten JavaScript-Bibliothek (es gibt aber auch andere, die es wert sind, untersucht zu werden).

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

Klassen mit jQuery ändern:

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

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

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

Außerdem 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);



Ä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

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

Dies ist am einfachsten mit einer Bibliothek wie jQuery:

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

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

Ein paar kleinere Anmerkungen und Änderungen zu den vorherigen Regexen:

Sie sollten dies global tun, falls die Klassenliste mehr als einmal den Klassennamen hat. Wahrscheinlich möchten Sie Leerzeichen von den Enden der Klassenliste entfernen und mehrere Leerzeichen in ein Leerzeichen umwandeln, um keine Leerzeichen zu erhalten. Keines dieser Dinge sollte ein Problem darstellen, wenn der einzige Code, der mit den Klassennamen abgetastet wird, den nachfolgenden Regex verwendet und einen Namen entfernt, bevor er hinzugefügt wird. Aber. Nun, wer weiß, wer sich mit der Klassennamenliste beschäftigt.

Bei diesem Regex wird die Groß- und Kleinschreibung nicht beachtet, so dass Fehler in Klassennamen auftreten können, bevor der Code in einem Browser verwendet wird, der sich nicht um Groß- und Kleinschreibung in Klassennamen kümmert.

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

Hier ist ein einfacher jQuery-Code.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Hier,

  • Class1 ist ein Listener für ein Ereignis.
  • Die übergeordnete Klasse ist die Klasse, in der sich die Klasse befindet, die Sie ändern möchten
  • Classtoremove ist die alte Klasse, die Sie haben.
  • Klasse zum Hinzufügen ist die neue Klasse, die Sie hinzufügen möchten.
  • 100 ist die Timeout-Verzögerung, während der die Klasse geändert wird.

Viel Glück.


Hier ist meine Version, voll funktionsfähig:

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
}

Verwendungszweck:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Ich dachte nur, ich würde das hier hineinwerfen:

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

Ich würde jQuery verwenden und so etwas schreiben:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Dieser Code fügt eine Funktion hinzu, die aufgerufen werden soll, wenn auf ein Element der ID some-element geklickt wird. Die Funktion hängt an das Klassenattribut des Elements an, wenn es nicht bereits Bestandteil des Elements ist, und entfernt es, falls vorhanden.

Ja, Sie müssen einen Verweis auf die jQuery-Bibliothek auf Ihrer Seite hinzufügen, um diesen Code verwenden zu können. Sie können sich jedoch darauf verlassen, dass die meisten Funktionen in der Bibliothek auf fast allen modernen Browsern funktionieren, und Sie sparen Zeit bei der Implementierung Ihren eigenen Code, um das gleiche zu tun.

Vielen Dank


JavaScript-Code funktioniert:

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

Sie können einen Arbeitscode von diesem Link herunterladen.


OK, ich denke, in diesem Fall sollten Sie jQuery verwenden oder eigene Methoden in reinem Javascript schreiben. Meine Präferenz ist, meine eigenen Methoden hinzuzufügen, anstatt alle jQuery in meine Anwendung einzuspeisen, wenn ich dies aus anderen Gründen nicht brauche.

Ich möchte im Folgenden etwas zu den Methoden meines Javascript-Frameworks tun, um einige Funktionalitäten hinzuzufügen, die das Hinzufügen von Klassen, das Löschen von Klassen usw. betreffen. Ähnlich wie bei jQuery wird dies vollständig in IE9 + unterstützt. Außerdem ist mein Code in ES6 geschrieben Um sicherzustellen, dass Ihr Browser dies unterstützt oder Sie etwas wie Babel verwenden, müssen Sie in Ihrem Code ansonsten ES5-Syntax verwenden. Auf diese Weise finden wir das Element über die ID. Das bedeutet, dass für das Element eine ID ausgewählt werden muss:

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

}

und Sie können einfach use wie unten aufrufen, sich vorstellen, dass Ihr Element die ID von 'id' und die Klasse von 'class' hat. Stellen Sie sicher, dass Sie sie als String übergeben. Sie können das util wie folgt verwenden:

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

Sie können node.className wie node.className :

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

Dies sollte in IE5.5 oder höher laut PPK funktionieren.


Sie können auch das HTMLElement-Objekt erweitern, um Methoden zum Hinzufügen, Entfernen, Umschalten und Überprüfen von Klassen ( gist ) 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);
}

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 .


Um Informationen aus einem anderen beliebten Framework, Google Closures, hinzuzufügen, lesen Sie die dom/classes Class-Klasse:

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

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

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

Eine Option zum Auswählen des Elements ist die Verwendung von goog.dom.query mit einem CSS3-Selektor:

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

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

Keine Beleidigung, aber es ist nicht einfach, die Klasse schnell zu wechseln, da der CSS-Interpreter dazu gezwungen wird, die visuelle Darstellung der gesamten Webseite neu zu berechnen.

Der Grund ist, dass es dem CSS-Interpreter so gut wie unmöglich ist, zu wissen, ob Vererbung oder Kaskadierung geändert werden könnten. Daher lautet die kurze Antwort:

Ändern Sie niemals className on-the-fly! -)

In der Regel müssen Sie jedoch nur ein oder zwei Eigenschaften ändern, und das lässt sich leicht implementieren:

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




dom