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

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

　　</head>

　　<body>

　　<button id="getp">Get Paragraph Height</button>

　　<button id="getd">Get Document Height</button>

　　<button id="getw">Get Window Height</button>

　　<p>

　　Sample paragraph to test height

　　</p>

　　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>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64083.shtml