CSS-Eigenschaftswerte für HTML-Elemente in JavaScript abrufen

In der Webentwicklung kann die dynamische Bearbeitung von CSS-Eigenschaften das Benutzererlebnis und die Benutzeroberfläche verbessern. Mit JavaScript ist der Zugriff auf diese Eigenschaften unkompliziert.

In Ihrem Szenario ist eine CSS-Datei mit einer HTML-Seite verknüpft und Sie müssen eine bestimmte Eigenschaft (z. B. Farbe) für ein Div mit dem Klassennamen „abrufen“ Layout." So erreichen Sie dies mit JavaScript:

Option 1: Parsen von Dokument-Stylesheets (nicht empfohlen)

Erklärung:
Bei dieser Methode wird das Dokument manuell durchlaufen .styleSheets-Objekt und analysieren seinen Inhalt, um nach der gewünschten Eigenschaft zu suchen. Dieser Ansatz wird jedoch nicht empfohlen, da er unhandlich werden kann, insbesondere bei komplexen CSS-Dateien oder wenn Sie Eigenschaften für mehrere Elemente abrufen müssen.

Option 2: Element emulieren und berechneten Stil verwenden (bevorzugt)

Erläuterung:
Diese Methode ist effizienter und liefert genaue Ergebnisse. Dabei wird ein Element mit demselben Klassennamen wie das Zielelement erstellt und dann auf den berechneten Stil des erstellten Elements zugegriffen. Der berechnete Stil stellt den tatsächlich auf das Element angewendeten Stil dar, einschließlich geerbter Stile und aller durch Benutzer-Stylesheets oder JavaScript vorgenommenen Änderungen.

JavaScript-Code:

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

Überlegungen zu Nicht-Inline-Stilen

Wenn Sie geerbte Stileigenschaften ohne Inline-Stildefinitionen abrufen möchten, können Sie die Inline-Stile vorübergehend entfernen und dann die geerbten Werte abrufen.

JavaScript-Code:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}