A savoir que tu peux récupérer facilement les valeurs css qui ont été définies "inline", à savoir directement dans la balise HTML, ou par attribution / modification des valeurs par js. Il suffit pour cela de demander la propriété de l'objet élément dont le nom correspond à la propriété css :
let monElement = document.getElementById('monElement'); // ceci est un exemple d'objet élément, un objet javascript qui correspond à un élément HTML
let elementColor = monElement.style.color;
let elementBackgroundColor = monElement.style.backgroundColor;
let elementOffsetY = monElement.style.offsetY;
Comme tu peux le voir, les noms de propriétés css doivent parfois être modifiés, les noms de variables javascript ne pouvant pas contenir de tirets, background-color devient backgroundColor ( tiret supprimé, deuxième mot commençant par une majuscule ).
Par contre, ça ne permet pas toujours d'accéder à la valeur du CSS. Mais je crois qu'il existe la méthode getComputedStyle() :
En vérité LucasWerquin, avec cette méthode, tu n'as pas accès au variables css, seulement aux propriétés valides.
Pour l'accès aux variables :
Pour une variable issue d'une règle css propre à un élément : Ton_HTMLElement.style.getPropertyValue('--ta-variable');
Pour une variable issue d'une règle css d'un élément parent à celui qui t'intéresse ou propre à cet élément (les deux cas) : getComputedStyle(Ton_HTMLElement).getPropertyValue(--ta-variable');
Dans un navigateur, l'objet de scope global désigner par globalThis est window. Sous node, globalThis désigne l'objet global.
Dans les deux cas, lorsque tu te place dans n'importe qu'elle scope et que tu fait appels à une variable, si celle-ci n'existe pas dans la scope actuel, le moteur JS va la chercher dans la scope parente de plus haut niveau.
Si dans celle-ci non plus elle n'existe pas, le moteur cherche à nouveau dans la scope supérieure directe...
Et ainsi de suite jusqu'à atteindre la scope global.
Or la scope global désigne l'objet window ou global (en fonction de l'environnement) et le moteur cherche donc dans les propriété de celui-ci. (Et s'il ne trouve toujours pas, tu te retrouve avec une erreur.)
Donc oui, utiliser window est généralement inutile.
Deux exemples plus parlants :
Cas 1 (avec "concurrence") :
window.scope = 0; // Ajout d'une propriété 'scope' à 'window'
const scope = 1; // Déclaration d'une constante 'scope' qui entre en concurrence avec 'window.scope'
!function() { // Création d'une scope grâce à une fonction
const scope = 2; // Déclaration d'une constante 'scope'
for(let scope = 3; scope < 4; scope++) // Création d'une scope grâce à une boucle
console.log(scope) // Renvoi 3
console.log(scope); // Renvoi 2
}();
console.log(scope); // renvoi 1
console.log(window.scope); // renvoi 0
Cas 2 (sans "concurrence") :
window.scope = 0; // Ajout d'une propriété 'scope' à 'window'qui entre en concurrence avec 'window.scope'
!function() { // Création d'une scope grâce à une fonction
const scope = 2; // Déclaration d'une constante 'scope'
for(let scope = 3; scope < 4; scope++) // Création d'une scope grâce à une boucle
console.log(scope) // Renvoi 3
console.log(scope); // Renvoi 2
}();
console.log(scope); // renvoi 0
console.log(window.scope); // renvoi 0
Merci pour ces lumières sur les scopes, c'est vrai que je me fais encore un peu avoir, des fois
Récupération de variable css en javascript
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)