Wie kann ich die Klasse eines Elements mit JavaScript ändern?

Question

Wie kann ich die Klasse eines HTML-Elements als Reaktion auf eine onclick oder andere Ereignisse mit JavaScript?

Answer 1

Ä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

Answer 2

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

Sie sollten dies global tun, falls die Klassenliste den Klassennamen mehr als einmal enthält. Außerdem werden Sie wahrscheinlich Leerzeichen von den Enden der Klassenliste entfernen und mehrere Leerzeichen in ein Leerzeichen umwandeln wollen, um zu verhindern, dass sich die Leerzeichen häufen. All diese Dinge sollten kein Problem darstellen, wenn der einzige Code, der mit den Klassennamen spielt, die unten stehende Regex verwendet und einen Namen entfernt, bevor er hinzugefügt wird. Aber. Nun, wer weiß, wer mit der Klassennamenliste herumspielt.

Diese Regex unterscheidet nicht zwischen Groß- und Kleinschreibung, so dass Fehler in Klassennamen auftauchen können, bevor der Code in einem Browser verwendet wird, der die Groß- und Kleinschreibung in Klassennamen nicht beachtet.

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

Answer 3

Die Linie

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

sein sollte:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

Answer 4

Ich würde jQuery verwenden und etwas wie dieses schreiben:

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

Dieser Code fügt eine Funktion hinzu, die aufgerufen wird, wenn ein Element mit der id irgendein-Element angeklickt wird. Die Funktion fügt an angeklickt in das Attribut class des Elements ein, wenn es nicht bereits Teil davon ist, und entfernt es, wenn es vorhanden ist.

Ja, Sie müssen einen Verweis auf die jQuery-Bibliothek in Ihre Seite einfügen, um diesen Code zu verwenden, aber zumindest können Sie sicher sein, dass die meisten Funktionen in der Bibliothek auf so ziemlich allen modernen Browsern funktionieren, und es wird Ihnen Zeit sparen, Ihren eigenen Code zu implementieren, um dasselbe zu tun.

Answer 5

Ändern Sie die Klasse eines Elements in Vanilla JavaScript mit Unterstützung für Internet Explorer 6

Sie können versuchen, den Knoten attributes um die Kompatibilität mit alten Browsern, sogar Internet Explorer 6, zu erhalten:

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>