Können Elementattribute über eine Punktnotation in Javascript aufgerufen werden?

Question

Ich arbeite an einem Skript, das dynamisch eine Gruppe von Schaltflächen erstellt, die alle mit einem Klassenattribut erstellt werden, damit ich sie stylen kann. Aber das Styling hat nie funktioniert.

Ich fügte den Klassenwert wie folgt hinzu: Dabei ist button eine Referenz auf das Element <button> im DOM.

änderte ich den obigen Code zu button.setAttribute("class", "foo"); und es funktioniert!

Aber das hat mich verwirrt, weil ich die Punktschreibweise (oder Objekteigenschaftsschreibweise? Ich weiß nicht, wie man es nennen soll) andere Werte, wie das Attribut value setzen.

Zum Beispiel habe ich einen Ereignis-Listener auf einige Tasten. Wenn sie angeklickt werden, wird das Attribut value dem Element hinzugefügt. Wenn es erneut geklickt wird, wird es entfernt:

button.onclick = function() { 
    if (this.value) 
    this.removeAttribute("value"); 
    else 
    this.value = "bar"; 
} 

Das obige funktioniert wie erwartet.

Also meine Frage ist - warum ist es, dass Bezeichnungen wie button.class = "foo"; scheinen mit einigen Attributen zu arbeiten und nicht mit anderen? Und gibt es eine Möglichkeit zu finden, welche Attribute sich mit dieser Notation richtig verhalten?

Answer 1

Sie müssen die Eigenschaft className verwenden, um den Wert des Attributs class des angegebenen Elements abzurufen und festzulegen.

Der Name className für diese Eigenschaft statt class aufgrund von Konflikten mit dem „Klasse“ Schlüsselwort in vielen Sprachen, die das DOM zu manipulieren, werden verwendet.

button.className= "foo"