Comment puis-je récupérer les valeurs des propriétés CSS dans leurs unités d'origine ?

Obtenir les valeurs de propriété CSS dans leurs unités d'origine

Lors de la détermination de la valeur de la propriété CSS d'un élément, les développeurs s'appuient souvent sur des méthodes telles que getComputedStyle ou css() de jQuery. Cependant, ces méthodes renvoient la valeur en pixels, ce qui peut poser problème si la valeur a été initialement définie dans d'autres unités (par exemple, pourcentage, em ou px). Cela soulève la question : comment pouvons-nous obtenir la valeur de la propriété CSS dans son unité d'origine, quelles que soient les unités avec lesquelles elle a été définie ?

L'importance des styles et de l'ordre des éléments

La clé réside dans en tenant compte des styles d'éléments et de l'ordre des sélecteurs CSS. Les styles d'éléments ont la priorité la plus élevée, nous commençons donc par vérifier si la valeur est explicitement définie dans la propriété de style de l'élément. Si c'est le cas, nous récupérons la valeur et sa priorité.

Ensuite, nous examinons les règles CSS correspondantes à l'aide de getMatchedCSSRules. Ces règles sont classées par priorité (la plus élevée en dernier) et nous les parcourons à rebours. Si une règle a une priorité non nulle, nous mettons à jour la valeur. Cependant, si une règle a une priorité importante, nous renvoyons immédiatement la valeur.

Exemple de code

Considérez le HTML et le CSS suivants :

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

Et le JavaScript suivant code :

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

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

Ce code génère les largeurs suivantes pour le divs :

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

Conclusion

En considérant à la fois les styles d'éléments et l'ordre des règles CSS correspondantes, cette fonction getMatchedStyle personnalisée récupère avec précision les valeurs des propriétés CSS dans leurs unités d'origine. Cette connaissance est cruciale pour gérer avec précision la taille et les dimensions 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!