valeur d'une propriété css en javascript

Récupérer la valeur d'une propriété css d'un élément html avec javascript

Pour récupérer la valeur d'une propriété CSS en JavaScript, vous pouvez utiliser la méthode window.getComputedStyle(). Voici un exemple de code qui montre comment l'utiliser :

Exemple code javascript 📋 Copier le code

// Récupère l'élément dont vous souhaitez récupérer la propriété CSS
var element = document.querySelector('#mon-element');

// Récupère les styles calculés pour cet élément
var styles = window.getComputedStyle(element);

// Récupère la valeur de la propriété CSS souhaitée
var value = styles.getPropertyValue('ma-propriete-css');

Vous pouvez également utiliser la méthode element.style pour récupérer les valeurs des propriétés CSS qui ont été définies directement sur l'élément en utilisant le style inline. Cependant, cette méthode ne fonctionnera que pour les propriétés qui ont été définies directement sur l'élément et ne prendra pas en compte les styles qui ont été appliqués via les feuilles de style ou les règles de style de la page. Voici un exemple de code qui montre comment utiliser la méthode element.style

Exemple 📋 Copier le code

// Récupère l'élément dont vous souhaitez récupérer la propriété CSS
var element = document.querySelector('#mon-element');

// Récupère la valeur de la propriété CSS souhaitée
var value = element.style.maProprieteCss;

Il est important de noter que la méthode element.style renverra la valeur de la propriété en tant que chaîne de caractères, même si la propriété est une valeur numérique. Si vous souhaitez travailler avec la valeur comme une valeur numérique, vous devrez la convertir en utilisant une fonction comme parseInt() ou parseFloat().

Voici un exemple de comment utiliser la fonction parseInt() en JavaScript :

Exemple 📋 Copier le code

// Déclare une variable contenant une valeur numérique en tant que chaîne de caractères
var value = '1234';

// Utilise parseInt() pour convertir la chaîne en un nombre entier
var number = parseInt(value);

// Affiche le résultat de la conversion
console.log(number); // affiche 1234

La fonction parseInt() prend en paramètre la chaîne de caractères à convertir et renvoie le résultat de la conversion en tant que nombre entier. Si la chaîne ne peut pas être convertie en un nombre entier valide, la fonction renverra NaN (Not a Number).

Vous pouvez également utiliser la fonction parseFloat() pour convertir une chaîne de caractères en un nombre à virgule flottante. La syntaxe est la même que pour parseInt(), mais la fonction renvoie un nombre à virgule flottante au lieu d'un nombre entier. Par exemple :

Exemple 📋 Copier le code

// Déclare une variable contenant une valeur numérique en tant que chaîne de caractères
var value = '12.34';

// Utilise parseFloat() pour convertir la chaîne en un nombre à virgule flottante
var number = parseFloat(value);

// Affiche le résultat de la conversion
console.log(number); // affiche 12.34

Il est important de noter que les deux fonctions parseInt() et parseFloat() ignorent les caractères qui ne sont pas des chiffres ou un signe de nombre dans la chaîne de caractères à convertir. Par exemple, la chaîne '1234abc' sera convertie en 1234 par parseInt() et en 12.34 par parseFloat().

Accueil

Comment récupérer la valeur d'un propriété css en javascript

Comment faire?

Récupérer la valeur d'une propriété css d'un élément html avec javascript

Voir aussi nos tutoriel :