Javascript element.style.height無法正常工作

Question

您好，非常感謝您審覈我的問題，我無法使用javascript設置div元素的高度，因爲element.style.height不適合我。

下面的代碼不起作用，只會有警報（「測試1」）激活，從而表示element.style.height不起作用

function PHSetter() { 
     alert("test1"); 
     document.getElementsByClassName("MainContent").style.height = "100px"; 
     alert("test2"); 
    } 

下面也代碼不工作，並將有警報（「測試1」）和警報（「測試2」）激活，我認爲這意味着document.getelementbyclassname命令確實工作，但是當它是時候設置高度，它只是有一個錯誤。

function PHSetter() { 
      alert("test1"); 
      var x = document.getElementsByClassName("MainContent"); 
      alert("test2"); 
      x.style.height = "100px"; 
      alert("test3"); 
     } 

下面的代碼是類名爲MainContent的div的css代碼。

.MainContent { 
    border-style: solid; 
    border-width: 1px; 
    position : relative;  
    width : 1150px; 
    height : 100%; 
    left  : 50%; 
    top  : 625px; 
    z-index: 1; 
    margin-left : -575px; 
    margin-top : -625px; 
} 

有幫助嗎？

Answer 1

getElementsByClassName返回陣列狀節點列表...

要麼你通過所有的元素迭代如果存在具有類作爲MainContent或如果許多元件中只有一個具有類作爲MainContent然後元件使用document.getElementsByClassName("MainContent")[0]

試試這個：

function PHSetter() { 
 
    document.getElementsByClassName("MainContent")[0].style.height = "100px"; 
 
}

.MainContent { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    position: relative; 
 
    width: 1150px; 
 
    height: 100%; 
 
    left: 50%; 
 
    top: 625px; 
 
    z-index: 1; 
 
    margin-left: -575px; 
 
    margin-top: -625px; 
 
}

<button onclick='PHSetter()'>Go</button> 
 
<div class='MainContent'>Content</div>