outerheight（outerheight和height的区别）

：暂无数据 2026-06-15 13:50:01 ：3

这篇文章给大家聊聊关于outerheight，以及outerheight和height的区别对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

本文目录

outerheight和height的区别
原生js怎么获取outerwidth跟outerheight的方法
jQuery中height，innerheight，outerheight的区别有哪些

outerheight和height的区别

在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进..jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth()，在此不详述。
1. .height()获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值（带一个参数）。注意：1）.css(’height’)和.height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。2）.height()总是返回内容宽度,不管CSSbox-sizing属性值。.height(’value’)设置的容器宽度是根据CSSbox-sizing属性来定的, 将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight，而不是原来的内容高度。
2. .innerHeight()为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
3. .outerHeight()获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。

原生js怎么获取outerwidth跟outerheight的方法

本文实例讲述了jQuery获得包含margin的outerWidth和outerHeight的方法。分享给大家供大家参考。具体如下：
《!DOCTYPE html》
《html》
《head》
《script src=“js/jquery.min.js“》
《/script》
《script》
$(document).ready(function(){
$(“button“).click(function(){
var txt=““;
txt+=“Width of div: “ + $(“#div1“).width() + “《/br》“;
txt+=“Height of div: “ + $(“#div1“).height() + “《/br》“;
txt+=“Outer width of div (margin included): “ + $(“#div1“).outerWidth(true) + “《/br》“;
txt+=“Outer height of div (margin included): “ + $(“#div1“).outerHeight(true);
$(“#div1“).html(txt);
});
});
《/script》
《/head》
《body》
《div id=“div1“ style=“height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;“》
《/div》
《br》
《button》Display dimensions of div《/button》
《p》outerWidth(true) - returns the width of an element (includes padding, border, and margin).《/p》
《p》outerHeight(true) - returns the height of an element (includes padding, border, and margin).《/p》
《/body》
《/html》

jQuery中height，innerheight，outerheight的区别有哪些

一、jQuery 中 height()
获取匹配元素集合中的第一个元素的当前计算高度值，总是返回内容宽度
二、jQuery 中 innerheight()
包括padding，但是不包括border，即： height + padding
三、jQuery 中 outerheight()
包括padding，border，即：height + padding + border
四、jQuery 中 outerheight(true)
包括padding，border和margin,即： height + padding + border + margin

关于outerheight到此分享完毕，希望能帮助到您。

outerheight（outerheight和height的区别）