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

741 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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