Javascript获取元素高度不起作用

Question

我需要根据元素高度切换按钮。尝试了 offsetHeight、clientHeight 和 scrollHeight，这些都不起作用。设置 alert() 用于测试目的，离开返回未定义。    window.onload = function (){    var wrapperHeight = document.getElementsByClassName("panel").offsetHeight;    var innerHeight = document.getElementsByClassName("description-content").offsetHeight;    var button = document.getElementsByClassName("accordion");    if(innerHeight > wrapperHeight){        button.style.display = "block";    }    alert(innerHeight);}

Answer 1

您应该放在[0]selector 之后document.getElementsByClassName("panel")，因为document.getElementsByClassName("panel")返回一个带有类“panel”的元素列表（数组），那么我建议使用 ID 并document.getElementById("panel_id");改为 put 以避免这些问题。

这是您的代码：（带类）

window.onload = function (){

    var wrapperHeight = document.getElementsByClassName("panel")[0].outerHeight;

    var innerHeight = document.getElementsByClassName("description-content")[0].outerHeight;

    var button = document.getElementsByClassName("accordion")[0];

    if(innerHeight > wrapperHeight){

        button.style.display = "block";

    }

    alert(innerHeight);

}

这是您的代码（带有 ID）：

window.onload = function (){

        var wrapperHeight = document.getElementById("panel_id").outerHeight;

        var innerHeight = document.getElementById("description-content_id").outerHeight;

        var button = document.getElementById("accordion_id");

        if(innerHeight > wrapperHeight){

            button.style.display = "block";

        }

        alert(innerHeight);

    }

Answer 2

您需要使用 style.height 属性。试试这个：

window.onload = function (){

    var wrapperHeight = document.getElementsByClassName("panel")[0].style.height;

    var innerHeight = document.getElementsByClassName("description-content")[0].style.height;

    var button = document.getElementsByClassName("accordion");

    if(innerHeight > wrapperHeight){

        button.style.display = "block";

    }

    alert(innerHeight);

}