28172 sujets

CSS et mise en forme, CSS3

[Résolu] Récupération du 'margin-top'

Bonjour à tous,

Je souhaite récupérer le margin-top d'une div.
J'ai une div avec un 'id' et à laquelle j'applique une classe définissant le margin-top de cette div.
Voilà le code :
<div id="toto" class="mon-margintop">
... mon contenu ...
</div>
Quand je souhaite récupérer le margintop via javascript avec le code suivant :
var toto_margintop = document.getElementById("toto").style.marginTop;
Je ne récupère rien ???
Par contre, quand j'applique un style (définissant le margintop), volià le code
<div id="toto" style="margintop:10px;">
... mon contenu ...
</div>
Dans ce cas, je récupère bien la valeur du margintop défini via var toto_margintop = document.getElementById("toto").style.marginTop;
Bizzare. Est-ce un conflit entre l'id et la classe ???
Merci pour votre réponse
Modérateur
Bonjour,

les valeurs dans monelement.style sont celles attribuées directement à l'élément, soit par javascript, soit par l'attribut style de la balise, mais pas par la feuille de style.

pour avoir le style final appliqué il faut utiliser la fonction getComputedStyle


const toto = document.getElementById('toto');
const style = window.getComputedStyle(toto);
alert(style.marginTop);

Modifié par kustolovic (20 Aug 2020 - 14:05)
Meilleure solution
Sujet clos
Aller à