Kann JavaScript auf den Wert ungültiger benutzerdefinierter CSS-Eigenschaften zugreifen?

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

In CSS können benutzerdefinierte Eigenschaften mit dem Präfix -- definiert werden. Können Sie jedoch über JavaScript auf den Wert ungültiger oder benutzerdefinierter CSS-Eigenschaften zugreifen?

Frage:

Angesichts des folgenden CSS:

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

Können Sie später in JavaScript den Wert der Eigenschaft -my-foo für ein bestimmtes div-Element ermitteln?

Antwort:

Der Zugriff auf ungültige Eigenschaftsnamen in CSSStyleDeclaration funktioniert nicht scheinen in gängigen Browsern wie Chrome und Firefox unterstützt zu werden. Für das angegebene CSS enthält das CSSStyleDeclaration-Objekt nur die gültige Eigenschaft width und überspringt -my-foo.

Interessanterweise besagt die DOM-Level-2-Stilspezifikation, dass alle angegebenen Eigenschaften über die CSSStyleDeclaration-Schnittstelle verfügbar sein sollten. Möglicherweise gibt es einen Browser, der dieses Verhalten unterstützt.

DIY-Ansatz:

Um dieses Problem zu umgehen, können Sie den rohen CSS-Text mit document.getElementsByTagName("style" analysieren. )[0].innerText. Dies kann jedoch ein umständlicher Ansatz sein.

Das obige ist der detaillierte Inhalt vonKann JavaScript auf den Wert ungültiger benutzerdefinierter CSS-Eigenschaften zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!