Comment récupérer les propriétés CSS des éléments d'une page Web à l'aide de JavaScript ?

Récupération des propriétés CSS des éléments de page Web à l'aide de JavaScript

Lorsqu'un fichier CSS est lié à une page Web, les développeurs JavaScript peuvent rencontrer le besoin de lire les propriétés CSS spécifiques des éléments.

Dans ce scénario, où une page Web contient un

élément portant le nom de classe « layout », les développeurs ont besoin d'une solution pour récupérer une propriété spécifique de cet élément à l'aide de JavaScript. Bien que diverses approches soient disponibles, deux options recommandables incluent :

Option 1 : Créer et modifier un élément

1. Créer un élément avec les mêmes propriétés que celui qui vous intéresse (par exemple, < ;div> avec le nom de classe "layout").
2. Utilisez la méthode getComputedStyle pour récupérer la valeur de propriété calculée. Cette méthode fournit le style résultant après avoir appliqué toutes les règles CSS pertinentes.

<code class="javascript">function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}

window.onload = function(){
    var d = document.createElement("div");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

Option 2 : analyser manuellement l'objet Document.styleSheets

1. Accéder à l'objet document.styleSheets , qui contient un tableau de toutes les feuilles de style liées au document.
2. Utilisez la méthode getPropertyValue() sur chaque feuille de style pour récupérer la valeur de propriété spécifique associée au sélecteur souhaité.

Ceci L'option n'est pas recommandée, sauf si elle est spécifiquement requise pour rassembler toutes les propriétés CSS définies par un sélecteur particulier.

De plus, pour ignorer les définitions de style en ligne de l'élément actuel, utilisez la fonction getNonInlineStyle() :

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn