Change the divs height dynamically
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> <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
<body onload="height()">
That should do the trick.
加载中,请稍侯......
精彩评论