javascript - Javascript element.style.height无法正常工作

This question already has answers here:

What do querySelectorAll and getElementsBy* methods return?
                                
                                    （9个答案）
                                
                        
                                3年前关闭。
            
                    
您好，感谢您审阅我的问题，我无法使用javascript在div元素上设置高度，因为element.style.height对我不起作用。

下面的代码不起作用，仅激活了alert（“ test1”），这意味着element.style.height不起作用

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

下面的代码也不起作用，并且将同时激活alert（“ test1”）和alert（“ test2”），我认为这意味着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;
}

有什么帮助吗？

最佳答案

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>