1

我的网络表单中有一个 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 高度。

4

3 回答 3

2

更新 - 重新评论第一条：

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

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

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

于 2013-07-02T11:49:34.603 回答
0 
$(document).ready(function () {
        var a;
        a = $("#divGrid").height();
        alert(a);
        a = $("#divGrid").innerHeight();
        alert(a);
        a = $("#divGrid").outerHeight();
        alert(a);
    });

你可以简单地试试这个。:)

于 2013-07-02T12:28:54.940 回答
0 
<!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>
于 2013-07-02T11:54:21.847 回答