„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie extrahiere ich CSS-Eigenschaften dynamisch mit JavaScript?

Wie extrahiere ich CSS-Eigenschaften dynamisch mit JavaScript?

Veröffentlicht am 08.11.2024
Durchsuche:937

How to Extract CSS Properties Dynamically Using JavaScript?

Extrahieren von CSS-Eigenschaften mit JavaScript

Das Navigieren in den an ein HTML-Dokument angehängten Stylesheets kann wertvolle Einblicke in die Darstellung von Seitenelementen liefern. Insbesondere die Möglichkeit, bestimmte CSS-Eigenschaften zu lesen, kann bei der dynamischen Stilmanipulation hilfreich sein.

Ein Ansatz besteht darin, das document.styleSheets-Objekt manuell zu überprüfen und die Stilregeln zu analysieren. Diese Methode ist jedoch arbeitsintensiv und kann unhandlich werden, insbesondere wenn bestimmte Selektoren als Ziel ausgewählt werden.

Eine direktere Technik besteht darin, ein temporäres Element zu erstellen, das dem gewünschten Selektor entspricht. Mit den Methoden getComputedStyle() (für moderne Browser) oder currentStyle (für Internet Explorer) können Sie den berechneten Wert einer beliebigen CSS-Eigenschaft für das erstellte Element abrufen.

Bedenken Sie beispielsweise den folgenden Code, um den abzurufen color-Eigenschaft eines

mit der Klasse „layout“:
function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create div
  d.className = "layout"; // Set class = "layout"
  alert(getStyleProp(d, "color")); // Get property value
};

Wenn Sie alternativ die von einem Stylesheet geerbte CSS-Eigenschaft ermitteln möchten, ohne Inline-Stile zu berücksichtigen, kann die folgende Funktion verwendet werden:

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

Durch die Nutzung dieser Techniken können Entwickler die CSS-Eigenschaften von Elementen dynamisch anpassen, ihre Präsentation manipulieren und ein tieferes Verständnis für den Stil der Seite gewinnen.

Freigabeerklärung Dieser Artikel wird unter folgender Adresse abgedruckt: 1729673789 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3