Il est facile de modifier les styles des éléments mais un peu difficile à lire la valeur.
JavaScript ne peut lire aucune propriété de style d'élément (elem.style) provenant de css (interne / externe), sauf si vous utilisez l'appel de méthode intégré getComputedStyle en javascript.
getComputedStyle (élément [, pseudo])
Élément: l'élément pour lequel lire la valeur.
pseudo: Un pseudo-élément si nécessaire, par exemple :: before. Une chaîne vide ou aucun argument signifie l'élément lui-même.
Le résultat est un objet avec des propriétés de style, comme elem.style, mais maintenant par rapport à toutes les classes CSS.
Par exemple, ici le style ne voit pas la marge:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Vous avez donc modifié votre code javaScript pour inclure le getComputedStyle de l'élément que vous souhaitez obtenir sa largeur / hauteur ou un autre attribut
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Valeurs calculées et résolues
Il existe deux concepts en CSS:
Une valeur de style calculée est la valeur après l'application de toutes les règles CSS et de l'héritage CSS, comme résultat de la cascade CSS. Cela peut ressembler à hauteur: 1em ou taille de police: 125%.
Une valeur de style résolue est celle finalement appliquée à l'élément. Des valeurs comme 1em ou 125% sont relatives. Le navigateur prend la valeur calculée et rend toutes les unités fixes et absolues, par exemple: hauteur: 20 pixels ou taille de police: 16 pixels. Pour les propriétés géométriques, les valeurs résolues peuvent avoir une virgule flottante, comme la largeur: 50,5 px.
Il y a longtemps, getComputedStyle a été créé pour obtenir des valeurs calculées, mais il s'est avéré que les valeurs résolues sont beaucoup plus pratiques et la norme a changé.
Donc, de nos jours, getComputedStyle retourne en fait la valeur résolue de la propriété.
Notez s'il vous plaît:
getComputedStyle requiert le nom complet de la propriété
Vous devez toujours demander la propriété exacte que vous souhaitez, comme paddingLeft ou hauteur ou largeur. Sinon, le résultat correct n'est pas garanti.
Par exemple, s'il existe des propriétés paddingLeft / paddingTop, que devons-nous obtenir pour getComputedStyle (elem) .padding? Rien, ou peut-être une valeur «générée» à partir de rembourrages connus? Il n'y a pas de règle standard ici.
Il existe d'autres incohérences. À titre d'exemple, certains navigateurs (Chrome) affichent 10 pixels dans le document ci-dessous, et certains d'entre eux (Firefox) - ne le font pas:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
pour plus d'informations https://javascript.info/styles-and-classes