Comment puis-je récupérer efficacement les valeurs des propriétés CSS initialement définies d'un élément ?

Extraction des valeurs de propriété CSS d'un élément en tant qu'ensemble

Lorsque vous avez besoin d'obtenir les valeurs de propriété CSS d'un élément telles qu'elles ont été initialement définies, la fonction getMatchedStyle propose une solution. Cette fonction parcourt les règles CSS correspondantes par ordre décroissant de priorité, en tenant compte à la fois des styles d'éléments et de l'importance des propriétés.

function getMatchedStyle(elem, property){
    var val = elem.style.getPropertyValue(property);
    if(elem.style.getPropertyPriority(property))
        return val;
    var rules = getMatchedCSSRules(elem);
    for(var i = rules.length; i--;){
        var important = r.style.getPropertyPriority(property);
        if(val == null || important){
            val = r.style.getPropertyValue(property);
            if(important)
                break;
        }
    }
    return val;
}

En prenant en compte l'importance des propriétés et les styles d'éléments, getMatchedStyle renvoie avec précision la valeur de la propriété CSS telle que définie dans le feuille de style.

Exemple d'utilisation

Considérez le code HTML et CSS suivant code :

<div class="b">div 1</div>
<div>

div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%; }
div#c.c  { width: 444px; }
x, div.a { width: 50%; }
.a       { width: 75%; }

L'exécution du code JavaScript suivant :

var d = document.querySelectorAll('div');

for(var i = 0; i < d.length; ++i){
    console.log("div " + (i+1) + ":  " + getMatchedStyle(d[i], 'width'));
}

affichera :

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Cela démontre la capacité de la fonction à extraire avec précision le définir les valeurs de largeur CSS des éléments.

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!