Zugriff auf ungültige benutzerdefinierte CSS-Eigenschaften über JavaScript

Es ist möglich, benutzerdefinierte CSS-Eigenschaften mit dem Präfix - zu erstellen. Kann jedoch über JavaScript auf diese benutzerdefinierten Eigenschaften zugegriffen werden?

Die Antwort lautet leider nein, zumindest in gängigen Browsern wie Chrome und Firefox. Benutzerdefinierte CSS-Eigenschaften mit ungültigen Namen werden vom CSS-Parser einfach ignoriert. Betrachten Sie beispielsweise das folgende CSS:

div {
    -my-foo: 42;
}

Selbst wenn dieses CSS auf ein Div angewendet wird, wird der Versuch, mit JavaScript auf die Eigenschaft -my-foo zuzugreifen, nichts zurückgeben. Das CSSStyleDeclaration-Objekt enthält nur gültige Eigenschaften wie Breite oder Höhe.

Dieses Verhalten entspricht den CSSStyleDeclaration-Spezifikationen. In den Spezifikationen heißt es, dass das Objekt nur „angegebene Eigenschaften“ enthalten sollte, was bedeutet, dass benutzerdefinierte Eigenschaften nicht erkannt werden. Einige Implementierungen unterstützen jedoch möglicherweise den Zugriff auf benutzerdefinierte Eigenschaften, dies kann jedoch nicht garantiert werden.

Wenn der Zugriff auf benutzerdefinierte CSS-Eigenschaften für Ihre Anwendung von entscheidender Bedeutung ist, können Sie die Einschränkungen von JavaScript umgehen, indem Sie den rohen CSS-Text analysieren. Dies kann mithilfe der innerText-Eigenschaft des Stilelements erfolgen:

document.getElementsByTagName("style")[0].innerText

Dieser Ansatz funktioniert zwar, ist aber nicht so So einfach wie der direkte Zugriff auf die Eigenschaften über das CSSStyleDeclaration-Objekt. Darüber hinaus ist eine zusätzliche Analyse und Bearbeitung des CSS-Textes erforderlich.