Hoe de hoogte van div te veranderen met de inhoud van andere div

Ik heb twee div op mijn website-pagina naast elkaar (een links en een rechts), ik wil de hoogte van de linkerpagina veranderen met de inhoud van de rechter met javascript

Ik heb geprobeerd de dynamische hoogte van de juiste div te hebben:

function getHeight() {
    var doc = document.getElementById('div.right');

    if (document.all)//ok I.E
    {
        H = doc.currentStyle.height;
    }
    else//ok FF
    {
        H = document.defaultView.getComputedStyle(doc, null).height;
    }
}​

Maar ik ben hier gestopt omdat ik niet weet hoe ik de javascript-variabele moet doorgeven aan mijn pagina met stijl-CSS, ik bedoel dat ik niet weet hoe ik deze waarde automatisch in de andere div (links div) op dezelfde pagina moet toepassen.

Enig idee?

0

2 antwoord

Gebruik gewoon

document.getElementById('div.left').style.height = H;

Bewerk

  1. AFAIK u kunt een externe stylesheet niet aanpassen vanuit JavaScript
  2. Is de hoogte van de div bepaald op het moment dat het document wordt aangeboden, geladen of enige willekeurige tijd nadat het document is geladen?

De code die ik hierboven heb gesuggereerd zou op deze manier gebruikt moeten worden (ik neem aan dat uw IE-code juist is)

function getHeight() {
    var doc = document.getElementById('div.right');
    if (document.all)//ok I.E
    {
        H = doc.currentStyle.height;
    }
    else//ok FF
    {
        H = document.defaultView.getComputedStyle(doc, null).height;
    }
    document.getElementById('div.left').style.height = H;//✔
}
2
toegevoegd
echt deze code werkt niet en de linker div heeft nog steeds dezelfde hoogte verschillend van div rechts
toegevoegd de auteur Nll, de bron

Om mensen te helpen vond ik een geweldige code om de hoogte van twee div autoamtisch te veranderen met een beetje Jquery:

<script type='text/javascript'>
    $(window).load(function(){
    var lh = $('#div.right').height();
     var rh = $('#div.left').height();
     if (lh >= rh){
    //alert('left : ' + lh);
    $('#div.left').height(lh);
    } else {
    //alert('right : ' + rh);
    $('#div.right').height(rh);
    };
    });
    </script>

Het werkt voor alle navigators.

0
toegevoegd