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

CSS-Werte aus externen Stylesheets mit Javascript/jQuery abrufen

Eine häufige Aufgabe in der Webentwicklung ist der Zugriff auf Werte aus externen CSS-Dateien. Während die jQuery-Methode $('element').css('property') berechnete Stile für vorhandene Elemente abrufen kann, wird es schwierig, wenn das Zielelement noch nicht dynamisch generiert wurde.

Ist vorhanden eine Alternative?

Glücklicherweise können wir mit jQuery einen cleveren Trick nutzen, um CSS-Werte abzurufen, ohne auf tatsächliche Elemente angewiesen zu sein. Lassen Sie uns die Lösung erkunden:

jQuery-Lösung:

Mit den folgenden Schritten können wir eine versteckte Kopie des Zielelements erstellen:

1. Erstellen Sie ein Platzhalterelement mit jQuery:

   var $p = $("<p></p>").hide().appendTo("body");

2. Access den CSS-Wert mithilfe der Standardfunktion „css()“:

   console.log($p.css("color"));

3. Entfernen Sie das ausgeblendete Element nach dem Abrufen des Werts:

   $p.remove();

Beispiel:

Bedenken Sie das folgende CSS und HTML:

p { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Mit der jQuery-Lösung können wir den „Farb“-Wert abrufen:

(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

Mit diesem Trick können wir CSS-Werte erhalten, ohne uns auf deren Existenz zu verlassen des Zielelements auf der Seite, was es zu einer nützlichen Technik für dynamisch generierte Inhalte macht.

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