Comment récupérer les valeurs de propriétés CSS pour les éléments en JavaScript ?

Lecture des propriétés CSS des éléments à l'aide de JavaScript

Problème :

Comment obtenir la valeur d'une propriété CSS pour un élément utilisant JavaScript, en considérant que la feuille de style est liée en externe à la page web ?

Solution :

Il existe deux approches principales :

1. Utilisation de document.styleSheets :

Cette méthode consiste à parcourir manuellement le tableau document.styleSheets et à analyser les règles CSS pour trouver la propriété souhaitée. Cependant, cette approche n'est pas recommandée car elle nécessite beaucoup de ressources et n'est pas pratique pour la plupart des scénarios.

2. Création d'un élément correspondant et utilisation de getComputedStyle :

Cette méthode crée un élément avec le même sélecteur CSS que l'élément cible et utilise la méthode getComputedStyle pour récupérer la valeur de la propriété. L'avantage de cette approche est qu'elle prend en compte tous les styles hérités et tous les styles appliqués dynamiquement.

Exemple de code :

Pour récupérer la propriété "color" d'un div avec la classe "layout", utilisez le code suivant :

<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
}</code>

Utilisation :

<code class="javascript">window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}</code>

Notes supplémentaires :

Pour ignorer le contenu en ligne définitions de style sur l'élément actuel, utilisez la fonction getNonInlineStyle :

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    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!