Wie rufe ich CSS-Werte aus externen Stylesheets ohne Elemente in Javascript/jQuery ab?

CSS-Werte aus externen Stylesheets mit Javascript/jQuery abrufen

Bei der Webentwicklung kann es notwendig sein, auf CSS-Werte aus einem externen Stylesheet zuzugreifen ohne dass das entsprechende HTML-Element physisch auf der Seite vorhanden ist. Dieses Szenario tritt häufig auf, wenn Inhalte dynamisch generiert werden.

Die häufig verwendete jQuery-Methode $('element').css('property') basiert auf dem Element, das auf der Seite gerendert wird. Um jedoch den CSS-Eigenschaftswert zu bestimmen, bevor das Element erstellt wird, ist ein alternativer Ansatz erforderlich.

Verwendung eines Ersatzelements

Eine Lösung besteht darin, ein temporäres, verstecktes Ersatzelement und liest seinen berechneten Stil. $("

").hide().appendTo("body") von jQuery erstellt ein ausgeblendetes Absatzelement im Seitentext. Anschließend können Sie $p.css("color") aufrufen, um den CSS-Farbeigenschaftswert abzurufen.

Beispielcode

// Scoping function to avoid creating a global
(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

Hinweis:In diesem Beispiel muss die externe CSS-Datei das „p“-Element mit den gewünschten Stileigenschaften definieren.

Das obige ist der detaillierte Inhalt vonWie rufe ich CSS-Werte aus externen Stylesheets ohne Elemente in Javascript/jQuery ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!