Changer une valeur d'un attribut en javascript

hatfab
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

betaWeb
Réponse acceptée

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>
betaWeb
Réponse acceptée

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";
});
betaWeb
Réponse acceptée

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.

Benjamin Derepas

Essais cela: (via jQuery)

var $div_a = $("#a");
var $div_b = $("#b");

var Height = $div_a.height();
$div_b.css({
  "margin-bottom": Height
});
hatfab
Auteur

YES !! Merci ça fonctionne.

hatfab
Auteur

Merci Benjamin Derepas pour ta solution :)

hatfab
Auteur

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.

hatfab
Auteur

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…

hatfab
Auteur

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… :)