Changer une valeur d'un attribut en javascript

Par hatfab, il y a 10 ans

Javascript

Bonjour,
J'essaie de changer la valeur d'un attribut CSS en javascript mais ça ne fonctionne pas du tout. Je n'arrive pas à comprendre pourquoi.
Je veux récupérer la hauteur d'une div (là ça marche) et l'assigner à la valeur du margin-bottom d'une autre div (là ça marche pas).
Quelqu'un peut-il m'expliquer ?
Merci !
Voici le code HTML, CSS, Javascript

<div class="contenu"> <div class="left"> <div id="left-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisiLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. </div> <div id="pavebas"> variable du contenu variable du contenu variable du contenu variable du contenu variable du contenu variable du contenu variable du contenu </div> </div> <div class="right"> Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. </div> <div class="cb"></div> </div> <!-- #contenu --> </body> .contenu{ width: 800px; background-color: red; margin: 0 auto; position: relative; } .left{ background: green; width: 200px; float: left; } #left-content{ margin-bottom: 100px; width: 190px; background-color: orange; } #pavebas{ position: absolute; bottom: 0; background-color: grey; width: 180px; } .right { background-color: blue; width: 580px; float: right; } .cb{ clear: both; } <script type="text/javascript"> var divHeight; var obj = document.getElementById('pavebas'); divHeight=obj.offsetHeight; var mb = document.getElementById('left-content'); mb.style.margin-bottom = divHeight +"px"; </script>

9 réponses

Benjamin Derepas, il y a 10 ans

Essais cela: (via jQuery)

var $div_a = $("#a"); var $div_b = $("#b"); var Height = $div_a.height(); $div_b.css({ "margin-bottom": Height });
betaWeb, il y a 10 ans

Salut,

Ca ne marche pas car tu t'es trompé dans le nommage du style (margin-bottom).

Essaye ceci plutôt:

<script type="text/javascript"> var divHeight; var obj = document.getElementById('pavebas'); divHeight=obj.offsetHeight; var mb = document.getElementById('left-content'); mb.style.marginBottom = divHeight +"px"; // au lieu de margin-bottom, marginBottom </script>
hatfab, il y a 10 ans

YES !! Merci ça fonctionne.

hatfab, il y a 10 ans

Merci Benjamin Derepas pour ta solution :)

hatfab, il y a 10 ans

Si je peux abuser, pourquoi si j recherche une class plutôt qu'un id ça ne fonctionne plus ?

<script type="text/javascript"> var divHeight; var obj = document.getElementsByClassName('pavebas'); divHeight=obj.offsetHeight + 340; var mb = document.getElementsByClassName('left-content'); mb.style.marginBottom = divHeight +"px"; </script>

En ayant changé les id par des class dans mon HTML bien sûr.

betaWeb, il y a 10 ans

Alors je te conseille plutôt de faire comme ça:

S'il n'y a qu'un élément à sélectionner:

var elem = document.querySelector('.mon_element');

S'il y en a plusieurs:

var elems = document.querySelectorAll('.mon_element'); [].forEach.call(elems, function(elem) { elem.style.marginBottom = divHeight +"px"; });
hatfab, il y a 10 ans

Il n'y a qu'un élément par page. Ça ferait ça ?

var divHeight; var elem = document.querySelector('.pavebas'); divHeight=elem.offsetHeight + 20; var mb = document.querySelector('left-content'); mb.style.marginBottom = divHeight +"px";

Ben ça marche pas…

betaWeb, il y a 10 ans

T'as oublié le '.' devant la classe, mais sinon ouais c'est ça:

var mb = document.querySelector('.left-content');

document.querySelector('.mon_element'); est l'équivalent JS du $('.mon_element'); en jQuery, et perso je préfère largement l'utilisation de JS à l'utilisation de jQuery.

hatfab, il y a 10 ans

Ah ok, ça marche merci. Le problème quand on est pas sûr de ce qu'on fait c'est qu'on ne voit pas que l'erreur peut venir de la syntaxe… :)