一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生。。。

1.偏移量(offset dimension)

测试代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offset偏移量学习</title>
<meta name="author" content="郭菊锋/702004176@qq.com"/>
<style type="text/css">
#a{
height: 300px;width: 300px;
border: 1px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
margin: 10px 0;
overflow: scroll;
}
#a p{height: 450px;}
</style>
</head>
<body>
<div id="a" style="">
<p></p>
</div>
</body>
</html>

js代码:

 <script type="text/javascript">
var a= document.getElementById('a');
console.log(a.offsetHeight);
console.log(a.clientHeight);
</script>

获取理论结果:

//offsetWidth  包括padding和border,不包括滚动条,滚动条是默认在宽度中的。

几种情况——
//加了boxsizing的情况:  offsetWidth值  =  style的宽度值,
//不加boxsizing的情况 :   offsetWidth值  =  style中的宽度  +  padding左右值  +  border左右值。

//有无滚动条不受影响

//height同理

以上理论,经测在谷歌和火狐中都适用。

offsetLeft 和 offsetTop

offsetLeft/offsetHeight是元素的左边框/上边框到其最近的、具有大小的元素左边框/上边框的距离。

具体值还是取决于他的offsetParent。JS-元素大小深入学习-offset、client、scroll等学习研究笔记-LMLPHP

心中有个概念,但是最终解释还是看不同情况下的结果:

JS-元素大小深入学习-offset、client、scroll等学习研究笔记-LMLPHP

2.客户区大小(client dimension)

指的是元素内容及其内边距所占据的空间大小,从字面上看,客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内【js高级程序设计文摘】

测试offsetWidth顺便测试的clientWidth的

clientWidth  永远会减去滚动条的尺寸和border的尺寸,只包括内容和padding的。!! 即使加了box-sizing=border-box也不包括border,

几种情况——
//加了box-sizing:   clientWidth值就是  =  style中的宽度 - border宽度,
//不加box-sizing:   clientWidth值就是  =  style中的宽度 + padding左右值。

//有滚动条情况:clientWidth值  =  (style中的宽度 + padding左右值)- 17px(滚动条的宽度值);
//滚动条加box-sizing情况:  clientWidth值  =  style中的宽度 - 17px(滚动条的宽度值)- border的左右宽度值

//height同理

以上理论,经测在谷歌和火狐中都适用。

3.scrollHeight(client dimension)

scrollHeight返回元素的完整的高度,以像素为单位

05-18 14:12
查看更多