JQuery——outerHeight()

最新推荐文章于 2022-11-11 08:59:38 发布

帝博格T－bag

最新推荐文章于 2022-11-11 08:59:38 发布

阅读量233

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_37616866/article/details/120826856

版权

本文详细介绍了jQuery的outerHeight()方法，包括如何使用outerHeight(true)获取包括margin的高度，以及如何获取第一个匹配元素的外高度。同时，文章指出outerHeight()不适用于window和document对象，并给出了相关示例代码进行演示。

摘要由CSDN通过智能技术生成

一、收集例子
1、如需包含 margin，请使用 outerHeight(true)

<style>
.test{
  height:100px;
  width:200px;
  padding:10px;
  margin:10px;
  border:5px solid red;
}
</style> 
<div class="test"></div>
<script>
$(function(){
	var h = $(".test").outerHeight(true)
	console.log(h)    // 150    
	// padding + border + element + margin (true)
})
</scrpit>

2、返回第一个匹配元素的外高度。

<style>
#p1 {
    color:red;
	height:50px;
	border:5px solid;
}
#p2 {
    background:yellow;
	height:60px;
	border:5px solid;
}
</style>
<body>
	<p id="p1" class="test">你好</p>
	<p id="p2" class="test">你好</p>
</body>
<script>
$(document).ready(function() {
   var h = $(".test").outerHeight();
   console.log(h)  // 60
});
</script>

3.outerHeight()不适用于window和document，height() == outerHeight()

   var docO = $(document).outerHeight();
   var docH = $(document).height();
   var winO = $(window).outerHeight();
   var winH = $(window).height();
   console.log(docO,docH,winO,winH)  // 280

二、outerHeight是什么
outerHeight 是一个返回Number类型的方法，
参数是bool类型，true包含margin的值，默认参数为 false ,不包含margin的值
outerHeight 只返回第一个匹配的元素的外部高度

帝博格T－bag

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery——outerHeight()

一、收集例子1、如需包含 margin，请使用 outerHeight(true)<style>.test{ height:100px; width:200px; padding:10px; margin:10px; border:5px solid red;}</style> <div class="test"></div><script>$(function(){ var h = $(".test").ou
复制链接

扫一扫