如何使用javascript获取div高度答案

【问题标题】：How to get div height using javascript如何使用javascript获取div高度
【发布时间】：2013-07-02 11:47:27
【问题描述】：

我的网络表单中有一个 div，该 div 中有 1 个网格视图。

<div id="divGrid" style="max-height:615px;width:100%;overflow-X:auto;overflow-Y:auto;" >
                                       <asp:GridView ID="gridEdit" GridLines="Vertical" runat="server" Width="100%" 
                                            ShowFooter="false" ShowHeader="false" AutoGenerateColumns="false" 
                                            Font-Names = "Arial"  HeaderStyle-CssClass="header" style="color:Black;"
                                            Font-Size = "11pt" AlternatingRowStyle-BackColor = "#CCDDFB" >
                                            <Columns>
                                                <asp:TemplateField HeaderText="S.No.">
                                                    <ItemTemplate>
                                                        <%# ((GridViewRow)Container).RowIndex + 1%>
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                            <HeaderStyle HorizontalAlign="Left" Font-Bold="false" />
                                            <RowStyle CssClass="rowstyle"/>
                                        </asp:GridView>
                                    </div>

现在我需要使用 java 脚本检查 div 标签的高度。当我使用时

alert(document.getElementById("divGrid").style.height);

它总是显示空白警告框。谁能告诉我如何使用 java 脚本检查 div 高度。

【问题讨论】：

你可能安装了 jQuery 吗？

标签： asp.net performance html

【解决方案1】：

更新 - 重新评论第一条：

您正在处理的最有可能的两种情况：

还有其他样式会导致元素从不报告高度。使用 chrome 的开发人员工具检查页面加载后为元素报告的高度
您在脚本中检查得太早，页面尚未完全加载。尝试在点击链接时调用相同的 .height 以检查其行为是否相同。

试试：alert(document.getElementById("divGrid").clientHeight);

【讨论】：

alert(document.getElementById("divGrid").clientHeight);在警报框中显示 0。但是我的问题通过使用 alert(document.getElementById('divGrid').scrollHeight); 解决了；
嗯，这很奇怪。仔细检查你在所有浏览器中得到正确的结果，检查这个stackoverflow.com/a/11116604/66372 了解我对#2 的意思。＃1通常发生在您在内部元素中有绝对定位时，我认为在浮动它们时也是如此。

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div>&nbsp;</div>
  <p>
    Sample paragraph to test height
  </p>
<script>
    function showHeight(ele, h) {
      $("div").text("The height for the " + ele +
                    " is " + h + "px.");
    }
    $("#getp").click(function () {
      showHeight("paragraph", $("p").height());
    });
    $("#getd").click(function () {
      showHeight("document", $(document).height());
    });
    $("#getw").click(function () {
      showHeight("window", $(window).height());
    });

</script>

</body>
</html>

【讨论】：

【解决方案3】：

$(document).ready(function () {
        var a;
        a = $("#divGrid").height();
        alert(a);
        a = $("#divGrid").innerHeight();
        alert(a);
        a = $("#divGrid").outerHeight();
        alert(a);
    });

您可以简单地尝试一下。 :)

【讨论】：