Comment récupérer des valeurs CSS à partir de feuilles de style externes sans éléments dans jQuery ?

Récupération de valeurs CSS à partir de feuilles de style externes à l'aide de Javascript/jQuery

Une tâche courante dans le développement Web consiste à accéder aux valeurs de fichiers CSS externes. Bien que la méthode jQuery $('element').css('property') puisse récupérer les styles calculés pour les éléments existants, cela devient difficile lorsque l'élément cible n'a pas encore été généré dynamiquement.

Y a-t-il une alternative ?

Heureusement, avec jQuery, nous pouvons utiliser une astuce astucieuse pour récupérer les valeurs CSS sans nous appuyer sur des éléments réels. Explorons la solution :

Solution jQuery :

Nous pouvons créer une copie cachée de l'élément cible en suivant les étapes suivantes :

1. Créez un élément d'espace réservé avec jQuery :

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

2. Accès la valeur CSS à l'aide de la fonction standard 'css()' :

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

3. Supprimez l'élément masqué après avoir récupéré la valeur :

   $p.remove();

Exemple :

Considérez le CSS suivant et HTML :

p { color: blue; }

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

Grâce à la solution jQuery, nous pouvons récupérer la valeur 'color' :

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

Cette astuce nous permet d'obtenir des valeurs CSS sans nous appuyer sur l'existence de l'élément cible sur la page, ce qui en fait une technique utile pour le contenu généré dynamiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!