Comment puis-je récupérer efficacement des valeurs CSS spécifiques à l'aide de JavaScript ?

Récupération des valeurs CSS avec JavaScript

Bien que la définition des valeurs CSS avec JavaScript soit simple à l'aide de l'attribut style, obtenir les valeurs CSS actuelles peut être plus difficile . Cet article aborde la question de savoir comment récupérer une valeur CSS spécifique sans analyser la chaîne de style entière.

Solution : getComputedStyle()

La solution à ce problème réside dans la méthode getComputedStyle(). Cette méthode vous permet d'accéder au style calculé d'un élément, qui inclut toutes les valeurs CSS qui ont été appliquées à l'élément, y compris les styles en ligne et hérités.

Pour utiliser getComputedStyle(), vous lui transmettez l'élément dont vous souhaitez récupérer le style. Il renvoie un objet qui contient toutes les propriétés de style calculées pour cet élément. Vous pouvez ensuite utiliser la méthode getPropertyValue() de cet objet pour récupérer la valeur d'une propriété CSS spécifique.

Voici un exemple pour illustrer comment récupérer la valeur CSS supérieure d'un élément d'image avec l'ID image_1 :

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

console.log(top);

Ce code enregistrera la valeur supérieure actuelle de l'élément d'image dans la console. Notez que la valeur supérieure est une chaîne, donc si vous devez effectuer des calculs dessus, vous devrez d'abord la convertir en nombre.

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!