更改div的高度dynamicaly

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'; 
}

上面，我把javascript代碼至極應該做的伎倆...這是德格：更改div的高度dynamicaly

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

，我一定能更大或更小與

<a href="#" onclick="pageSize('bigger')"><img src="img/contentbigger.png" /> Page bigger</a> &nbsp; <a href="#" onclick="pageSize('smaller')"><img src="img/contentsmaller.png" /> Pagina smaller</a>

但是這段代碼在最新的Mozilla Firefox中沒有做任何事情，也沒有最新的Internet Explorer。

有人看到這裏有什麼問題嗎？因爲我不是很好用javascript ...

來源

2011-09-03 Rune

考慮使用jQuery，其中'.height（）'會給你一個可靠的值和一個可靠的可能性來設置它 –

我猜parseInt()應用於像<numeric>px或<numeric>%字符串具有假的返回值。您應該省略將px附加到您的身高以使其工作。

來源

2011-09-03 15:34:56 etuardu

謝謝，但我該怎麼做？ – Rune

使用element.offsetHeight而不是element.style.height。 OffsetHeight也是一個數字，所以不需要parseInt。

來源

2011-09-03 15:55:29 Joe

得到oldHeight時請務必擺脫px或em字符串：

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'; 
}

來源

2011-09-03 17:19:00

適用的唯一ID這兩個DIV的。我們說「左」和「右」。因此，代碼將是這樣的：

<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>

然後剛剛火在頁面加載

<body onload="height()">

這應該做的伎倆功能。

來源

2014-10-17 02:00:58 Rossitten

更改div的高度dynamicaly

回答

相關問題