Comment récupérer les valeurs CSS des feuilles de style externes pour les éléments générés dynamiquement ?

Récupération de valeurs CSS à partir de feuilles de style externes avec Javascript/jQuery

Alors que la méthode jQuery $('element').css('property ') est un moyen pratique de récupérer des informations de style, il nécessite la présence de l'élément sur la page. Pour les éléments générés dynamiquement et donc pas encore présents, une approche différente est nécessaire.

Exploiter les éléments cachés

Une stratégie consiste à ajouter temporairement une copie cachée du élément à la page. En accédant au style de cet élément caché, vous pouvez récupérer la valeur CSS souhaitée. Cette méthode peut être implémentée à l'aide du code suivant :

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

Cependant, cette approche introduit des manipulations DOM inutiles, affectant potentiellement les performances de la page.

Approche alternative avec jQuery

Une solution alternative exploite la fonction $.getStyle() de jQuery, qui vous permet d'accéder à la valeur d'une propriété de style directement à partir d'une chaîne de sélection ou d'un objet élément sans le rendre sur la page :

$.getStyle("p", "color");

Cette méthode fournit un moyen plus propre et plus efficace de récupérer les valeurs CSS pour les éléments générés 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!