Comment accéder aux valeurs CSS pour les éléments générés dynamiquement dans JavaScript/jQuery ?

Accès aux valeurs CSS à partir de feuilles de style externes avec JavaScript/jQuery

Introduction
De nombreuses applications Web s'appuient sur des éléments générés dynamiquement qui ne sont pas présent lors du chargement initial de la page. Cependant, styliser ces éléments à l’aide de CSS externes peut poser des problèmes. Cet article examine comment récupérer les valeurs CSS pour de tels éléments, en particulier lors de l'utilisation de JavaScript ou de jQuery.

Utilisation de la méthode CSS de jQuery
La méthode jQuery $('element').css( 'propriété') est largement utilisé pour récupérer les valeurs CSS. Cependant, cela nécessite que l'élément soit rendu sur la page. Pour les éléments générés dynamiquement, cette approche peut ne pas être réalisable.

Approche alternative : élément caché
Pour surmonter cette limitation, une approche consiste à ajouter une copie cachée de l'élément au page. Cela nous permet d'accéder à ses attributs de style et de déterminer la valeur CSS avant même que l'élément réel ne soit généré.

Implémentation de JavaScript
En utilisant JavaScript, nous pouvons y parvenir comme suit :

(function() {
    // Create a hidden paragraph element
    var $p = $("<p>").hide().appendTo("body");

    // Get the CSS value of "color"
    console.log($p.css("color"));

    // Remove the hidden element
    $p.remove();
})();

Sortie :
En supposant que la règle CSS p {color: blue} existe, la sortie sera :

"blue"

Cette méthode fonctionne car le L'élément partage les mêmes propriétés CSS que l'élément généré dynamiquement, nous permettant de récupérer la valeur sans que l'élément soit présent sur la page.

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!