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

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

Susan Sarandon
Libérer: 2024-12-19 18:43:10
original
208 Les gens l'ont consulté

How Can I Retrieve CSS Property Values in Their Original Units?

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>
Copier après la connexion

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'));
}
Copier après la connexion

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

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal