CODEWITHSUNDEEP
asp.netperformancehtml
Ashish Rathore
Ashish Rathore

Reputation: 2696

How to get div height using javascript

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.

Upvotes: 1

Views: 2321

Answers (2)

Binod
Binod

Reputation: 457

$(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. :)

Upvotes: 0

eglasius
eglasius

Reputation: 36037

Update - re first comment:

The 2 most likely cases you're dealing with:

  1. 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
  2. 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);

Upvotes: 2

Related Questions