Können wir in JavaScript auf Werte benutzerdefinierter oder ungültiger CSS-Eigenschaften zugreifen?

Zugriff auf Werte ungültiger/benutzerdefinierter CSS-Eigenschaften über JavaScript

Im Bereich der Webentwicklung sind CSS-Eigenschaften für die Gestaltung von Elementen von entscheidender Bedeutung. Obwohl zahlreiche Standard-CSS-Eigenschaften definiert sind, kann es vorkommen, dass Sie Ihre eigenen benutzerdefinierten Eigenschaften verwenden möchten. Dies wirft die Frage auf: Können wir in JavaScript auf die Werte dieser ungültigen oder benutzerdefinierten CSS-Eigenschaften zugreifen?

Um dies zu untersuchen, betrachten Sie das folgende CSS:

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

Angenommen, Sie haben einen solchen Stil Deklaration, können Sie den Wert der Eigenschaft -my-foo mithilfe von JavaScript für ein bestimmtes div-Element abrufen?

Konventionelle Methoden

Leider ist der direkte Zugriff auf die Werte ungültig CSS-Eigenschaften sind mit herkömmlichen Mitteln nicht möglich. Browser neigen dazu, nicht erkannte oder benutzerdefinierte Eigenschaften zu ignorieren, sodass Sie sie nicht im CSSStyleDeclaration-Objekt aufgelistet finden. Im angegebenen CSS-Beispiel enthält das style:CSSStyleDeclaration-Objekt beispielsweise nur die width-Eigenschaft.

Mögliche Alternative

Herkömmliche Methoden funktionieren zwar möglicherweise nicht, aber es gibt sie ein alternativer Ansatz. Sie können den rohen CSS-Text manuell analysieren, um die Werte benutzerdefinierter Eigenschaften abzurufen. Sie könnten beispielsweise den folgenden Code verwenden:

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

Dieser Code ruft den gesamten rohen CSS-Text ab und ermöglicht Ihnen die Suche nach dem benutzerdefinierten Eigenschaftswert, an dem Sie interessiert sind. Beachten Sie, dass diese Methode zusätzliche Informationen erfordert Verarbeitung und ist möglicherweise nicht für alle Szenarien geeignet.

Hinweis:

Es ist erwähnenswert, dass die CSSStyleDeclaration-Schnittstelle, wie in der DOM-Level-2-Stilspezifikation definiert bedeutet, dass alle angegebenen Eigenschaften, einschließlich ungültiger, über die Schnittstelle zugänglich sein sollten. Allerdings halten sich die meisten Browser derzeit nicht an diesen Teil der Spezifikation.

Das obige ist der detaillierte Inhalt vonKönnen wir in JavaScript auf Werte benutzerdefinierter oder ungültiger CSS-Eigenschaften zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!