benutzerdefinierten Attribut funktioniert nur mit element.getAttribute ("attribute"), aber nicht "element.attribute"

Question

ich gerade bemerkt haben, dass, wenn ich geben ein benutzerdefiniertes Attribut zu einem HTML-Element, zum Beispiel:

<input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" /> 

ich kann es wie folgt dann abrufen:

document.getElementById("my_button").getAttribute("custom_attr"); 

und es wird "custom_attr_text" zurück, aber wenn ich es tue

document.getElementById("my_button").custom_attr; 

dann gibt es undefined zurück!

Ich bemerkte auch, dass mit einem eingebauten Attribut (zum Beispiel value oder id) beide der oben genannten funktioniert gut! Könnte jemand bitte erklären, warum das passiert?

Answer 1

Nur bestimmte Standardattribute werden direkt an Eigenschaften zugeordnet. Dies ist nicht das definierte Verhalten für Nicht-Standard (custom) Attribute.

Die rückwärtskompatible Art und Weise der Verwendung von benutzerdefinierten Attributen ist sie mit data- Präfix.

<input ... data-custom_attr="custom_attr_text" ... /> 

Dann werden sie kompatiblen Browsern in HTML5 als:

element.dataset.custom_attr 

Aber in Legacy-Browser, werden Sie noch .getAttribute() verwenden müssen.