.height()的注意事项及实例
导读: .height( 描述: 获取匹配元素集合中的第一个元素的当前计算高度值。 添加的版本: 1.0.height( 这个方法不接受任何参数。 .css('height' 和 ....
.height()
描述: 获取匹配元素集合中的第一个元素的当前计算高度值。
添加的版本: 1.0.height()
这个方法不接受任何参数。
.css('height') 和 .height()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的高度需要数学计算的时候推荐使用.height() 方法 。
这个方法同样能计算出window和document的高度。
$(window).height();
// returns height of browser viewport
$(document).height();
// returns height of HTML document
注意.height()总是返回内容宽度,不管CSS box-sizing属性值。
注意:在绝对定位和给定display:block时,虽然style和script标签用.width() 或 height()也将报告一个值,强烈建议不要在这些标签中调用这些方法。这是一种不好的做法,结果也证明是不可靠的。
例子:
显示各个高度。注意这个来自值iframe的值可能小于你的预期。黄色高亮显示iframe body。
body {
background:yellow;
}
button {
font-size:12px;
margin:2px;
}
p {
width:150px;
border:1px red solid;
}
div {
color:red;
font-weight:bold;
}
Get Paragraph Height
Get Document Height
Get Window Height
&
nbsp;
Sample paragraph to test height
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()); } );声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: .height()的注意事项及实例
本文地址: https://pptw.com/jishu/655782.html
