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

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

Susan Sarandon

Libérer： 2024-10-23 19:04:02

original

854 Les gens l'ont consulté

How to Retrieve CSS Properties of Webpage Elements Using 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

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").
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>

Copier après la connexion

Option 2 : analyser manuellement l'objet Document.styleSheets

Accéder à l'objet document.styleSheets , qui contient un tableau de toutes les feuilles de style liées au document.
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>

Copier après la connexion

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!