Kann JavaScript auf Werte ungültiger CSS-Eigenschaften zugreifen?

Kann JavaScript ungültige CSS-Eigenschaftswerte abrufen?

Benutzerdefinierte CSS-Eigenschaften, gekennzeichnet durch Namen mit einem vorangestellten Bindestrich, bieten einen Mechanismus zum Definieren von und Zugriff auf einzigartige Stile innerhalb einer Anwendung. Kann JavaScript jedoch auf die Werte dieser benutzerdefinierten Eigenschaften zugreifen, wenn diese ungültig sind oder vom Browser nicht erkannt werden?

Erklärung

Das CSSStyleDeclaration-Objekt macht die Stileigenschaften von verfügbar ein Element in JavaScript. Wenn ein ungültiger Eigenschaftsname wie „-my-foo“ auftritt, überspringt dieses Objekt normalerweise die Eigenschaft und fährt mit anderen gültigen Eigenschaften fort.

Die DOM-Level-2-Stilspezifikation schlägt vor, dass alle CSS-Eigenschaften innerhalb eines Der Deklarationsblock sollte über die CSSStyleDeclaration-Schnittstelle zugänglich sein, einschließlich ungültiger. In der Praxis unterstützen Browser wie Chrome und Firefox dieses Verhalten jedoch nicht.

Trotz des fehlenden direkten JavaScript-Zugriffs auf die Werte ungültiger CSS-Eigenschaften besteht ein alternativer Ansatz darin, den rohen CSS-Text zu analysieren. Durch Extrahieren der Stileigenschaften aus dem entsprechenden Stilelement können Sie den Wert einer benutzerdefinierten Eigenschaft manuell identifizieren und abrufen, auch wenn diese ungültig ist.

Codebeispiel

Die Der folgende Code zeigt, wie der rohe CSS-Text analysiert und der Wert der Eigenschaft „-my-foo“ abgerufen wird:

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\b${propertyName}:\s*(.+?)\b`, "i"))[1];

Hinweis: Dieser Ansatz erfordert einen regulären Ausdruck, der mit übereinstimmt Geben Sie den Namen der benutzerdefinierten Eigenschaft ein und extrahieren Sie ihren Wert. Es gilt als Low-Level-Lösung und ist möglicherweise nicht für alle Szenarien die effizienteste oder geeignetste Methode.

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