Wie rufe ich Werte ungültiger/benutzerdefinierter CSS-Eigenschaften in JavaScript ab?

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

Beim Definieren benutzerdefinierter oder ungültiger CSS-Eigenschaften wie „-my-foo“, Entwickler fragen sich vielleicht, ob es möglich ist, ihre Werte aus JavaScript abzurufen.

Um diese Frage zu beantworten, gehen wir davon aus, dass wir CSS wie unten gezeigt haben:

div {
    -my-foo: 42;
}

Versuch, auf den Wert von „-my“ zuzugreifen -foo“ von JavaScript über das CSSStyleDeclaration-Objekt kann zu Schwierigkeiten führen. Tests in Chrome und Firefox zeigen, dass diese Browser ungültige Eigenschaften überspringen und nur gültige verfügbar machen. Zum Beispiel mit CSS wie:

div {
    width: 100px;
    -my-foo: 25px;
}

das CSSStyleDeclaration-Objekt enthält nur die folgenden Schlüssel:

0: width
cssText: "width: 100px"
length: 1

Daher wird der Wert von „-my-foo“ aus JavaScript mit abgerufen Diese Methode ist nicht durchführbar.

In der DOM-Level-2-Style-Spezifikation heißt es jedoch, dass „von einer Implementierung [Browser] erwartet wird, dass sie über die CSSStyleDeclaration-Schnittstelle Zugriff auf alle angegebenen Eigenschaften bietet.“ Dies legt nahe, dass Browser theoretisch ungültige Eigenschaften im Objekt auflisten sollten, auch wenn sie diese nicht erkennen.

Um dieses Problem zu umgehen, ist es möglich, den rohen CSS-Text zu analysieren, um den Wert der benutzerdefinierten Eigenschaft abzurufen. Dieser Ansatz wird jedoch nicht empfohlen, da er mit erheblichem Aufwand verbunden ist und möglicherweise nicht immer zuverlässig oder effizient ist.

Das obige ist der detaillierte Inhalt vonWie rufe ich Werte ungültiger/benutzerdefinierter CSS-Eigenschaften in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!