Change the divs height dynamically_问答_开发者

开发者 https://www.devze.com 2023-04-02 09:39 出处：网络

function pageSize(what){ oldHeight = parseInt(document.getElementById(\'items\').style.height); if(what == \'bigger\') {newHeight = oldHeight + 100};

相关专题：javascript

function pageSize(what){
    oldHeight = parseInt(document.getElementById('items').style.height);
    if(what == 'bigger') {newHeight = oldHeight + 100};
    if(what == 'smaller'){newHeight = oldHeight - 100};
    document.getElementById('items').style.height = newHeight + 'px';
}

Above, I put the JavaScript code which should do the trick... This is the div:

<div id="items" style="height: 100%;"></div>

And I make it bigger or smaller with

<a href="#" onclick="pag开发者_运维技巧eSize('bigger')"><img src="img/contentbigger.png" /> Page bigger</a> &nbsp; <a href="#" onclick="pageSize('smaller')"><img src="img/contentsmaller.png" /> Pagina smaller</a>

But this code does nothing in the newest Mozilla Firefox neither the newest Internet Explorer.

Does somebody see what's wrong here? Because I'm not really that good with JavaScript.

I guess parseInt() applied on a string like <numeric>px or <numeric>% has bogus return values. You should omit to append px to your height to make it work.

Use element.offsetHeight instead of element.style.height. OffsetHeight will be a number too, so no need to parseInt.

Make sure to get rid of the px or em strings when getting the oldHeight:

function pageSize(what) {
  oldHeight = document.getElementById('items').style.height.replace('px','').replace('em','');
  oldHeight = parseInt(oldHeight);
  if(what == 'bigger') {newHeight = oldHeight + 100};
  if(what == 'smaller'){newHeight = oldHeight - 100};
  document.getElementById('items').style.height = newHeight + 'px';
}

apply unique IDs to both DIV's. Let's say "left" and "right". So the code will be like this:

<script>
function height() 
{
    var right = document.getElementById('right').clientHeight;
    var left = document.getElementById('left').clientHeight;

    if(right > left)
    {
        document.getElementById('left').style.height = right;
    }
    else
    {
        document.getElementById('right').style.height = left;
    }
}
</script>

Then just fire the function on the page load