首页 / 知识

.height()的注意事项及实例

2023-04-11 13:29:00

.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>
　　
　　<script src="https://code.jquery.com/jquery-latest.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>

描述元素单位方法计算参数

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢