Kann JavaScript mit ungültigen Namen auf benutzerdefinierte CSS-Eigenschaften zugreifen?

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:

<code class="css">div {
    -my-foo: 42;
}</code>

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:

<code class="js">document.getElementsByTagName("style")[0].innerText</code>

Dieser Ansatz funktioniert zwar, ist jedoch nicht 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.

Das obige ist der detaillierte Inhalt vonKann JavaScript mit ungültigen Namen auf benutzerdefinierte CSS-Eigenschaften zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!