-
<style>
-
#d1{
-
width: 300px;
-
height: 400px;
-
border: 5px solid #000;
-
margin: 10px;
-
padding: 10px;
-
}
-
</style>
-
<div id="d1"></div>
1、offsetWidth
计算内容包含内容+边框+内边距 (高度计算同理)
-
var d1=document.getElementById("d1");
-
var d1Offset=d1.offsetWidth;
-
var d1OutWidth=$("#d1").outerWidth(false);(false不包含外边距)
-
var d1OutWidth1=$("#d1").outerWidth(true);(true包含外边距)
-
var d1OutWidth2=$("#d1").outerWidth();(默认不包含外边距)
-
console.log(d1Offset)(330)
-
console.log(d1OutWidth,d1OutWidth1,d1OutWidth2)(330 350 330)
2、clientWidth
计算内容 包含 内容+内边距 (不包含外边距和边框)(宽度计算同理)
-
var d1Offset=d1.clientWidth;
-
var d1OutWidth2=$("#d1").innerWidth(); (括号内没有值)
-
console.log(d1Offset) 320
-
console.log(d1OutWidth2) 320
3、width
计算内容包含 内容 (不包含内外边距和边框)
-
var d1Offset=d1.style.width;
-
var d1OutWidth2=$("#d1").width(); (括号内写值代表赋值)
-
console.log(d1Offset) 300
-
console.log(d1OutWidth2) 300
4、scrollWidth
计算内容包含 内容+内边距+溢出的尺寸 (不包含外边距和边框)
-
var d1Offset=d1.scrollWidth;
-
console.log(d1Offset) 320 jq没有