如何使用JavaScript获取div高度
[英]How to get div height using javascript
问题描述
I'm having an div in my web form and 1 grid-view inside that div. 
我的网络表单中有一个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>
Now i need to check height of div tag using java script.When i use 现在我需要使用Java脚本检查div标签的高度。
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. 它总是显示空白警报框。任何人都可以告诉我如何使用Java脚本检查div高度。
3 个解决方案
解决方案1
2 2013-07-02 11:49:34
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 在页面加载后，使用chrome的开发人员工具检查为元素报告的高度
- 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. 尝试在点击链接上调用相同的.height，以检查其行为是否相同。
try: alert(document.getElementById("divGrid").clientHeight); 试试： alert(document.getElementById("divGrid").clientHeight);
解决方案2
0 已采纳 2013-07-02 11:54:21
<!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> </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
0 2013-07-02 12:28:54
$(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. 您可以尝试一下。 :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.