javascript：根據適合的新內容改變身高

Question

我有一個簡單的分級菜單，第一級項目顯示他們的子女點擊時。它一切正常，但擴展菜單項使一些其他頁面元素相互重疊。所以我試圖改變元素高度，但它不工作。這裏是我的代碼：

function showSubmenu(id) { 
     var container = document.getElementById("colonna1_hp"); //container not changing height 

     var totalHeight = container.clientHeight; 

     var list = document.getElementById("aree_tematiche_hp"); //menu container 
     var prevHeight = list.clientHeight; 

     //expand menu 

     var currHeight = list.clientHeight; 
     var diff = currHeight - prevHeight; 
     var prova = totalHeight+diff; 

     container.style.height = prova + "px"; 

    } 

debuggind顯示一切正常計算，並且新的高度設置是否正確，但我沒有看到結果。我究竟做錯了什麼？

Answer 1

你可以使用：

document.getElementById("elementid").style.height = setHeight + "px"; 

或使用jQuery

$("#elementid").css({ 'height': setHeight + "px" }); 

哪裏調用setHeight是高度值，像素爲單位。

一個例子的工作：

var setHeight = 1000; 
 

 
document.getElementById("iddiv").style.height = setHeight + "px";

#iddiv { 
 
    background-color: lightgrey; 
 
    width: 300px; 
 
    border: 25px solid green; 
 
    padding: 25px; 
 
    margin: 25px; 
 
}

<div id = "iddiv" >This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>