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

Obtention de valeurs CSS avec JavaScript

En plus de définir des valeurs CSS avec JavaScript (par exemple, document.getElementById('image_1').style .top = '100px'), vous pouvez également récupérer la valeur actuelle d'une propriété de style spécifique. Cela peut être utile à diverses fins, comme ajuster dynamiquement l'apparence d'un élément en fonction de son style actuel.

Pour obtenir la valeur d'une propriété CSS spécifique, vous pouvez utiliser la méthode getComputedStyle(). Cette méthode prend un élément comme argument et renvoie un objet CSSStyleDeclaration qui représente le style calculé de cet élément. Chaque propriété de l'objet CSSStyleDeclaration correspond à une propriété CSS et la valeur de la propriété reflète la valeur calculée pour cette propriété de style.

Voici un exemple :

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

Dans cet exemple , la méthode getComputedStyle() permet de récupérer le style calculé de l'élément ayant l'ID "image_1". La méthode getPropertyValue() est ensuite utilisée pour obtenir la valeur de la propriété de style 'top' de cet élément. La valeur de la propriété 'top' (probablement '100px' dans cet exemple) est alors disponible via la variable top et peut être utilisée pour un traitement ou une manipulation ultérieurs dans votre code JavaScript.

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!