How to get div height using javascript

Question

I'm having an div in my web form and 1 grid-view inside that div.

<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>

Now i need to check height of div tag using java script.When i use

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

It always shows blank alert box.Can any one tell me how can i check div height using java script.

Answer 1

Update - re first comment:

The 2 most likely cases you're dealing with:

there are other styles that cause the element to never report a height. Check with chrome's developer tools the height reported for the element after the page has loaded
you're checking too early in the script, and the page hasn't fully loaded yet. Try calling the same .height on a link on click to check if it behaves the same.

try: alert(document.getElementById("divGrid").clientHeight);

Answer 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>

Answer 3

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

you can simply try this. :)

How to get div height using javascript

Question

3 answers

solution1
2 2013-07-02 11:49:34

solution2
0 ACCPTED 2013-07-02 11:54:21

solution3
0 2013-07-02 12:28:54

How to get div height using javascript

Question

3 answers

solution1 2 2013-07-02 11:49:34

solution2 0 ACCPTED 2013-07-02 11:54:21

solution3 0 2013-07-02 12:28:54

solution1
2 2013-07-02 11:49:34

solution2
0 ACCPTED 2013-07-02 11:54:21

solution3
0 2013-07-02 12:28:54