1/offsetWidth 和 offsetHeight
得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width + border + padding
div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width 因为东西 只能得到行内的数值
2/offsetLeft 和 offsetTop
返回距离上级盒子（最近的带有定位）左边的位置
如果父级都没有定位则以body 为准
这里的父级指的是所上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离
3/offsetParent
offsetParent返回该对象的父级 （带有定位） 不一定是亲的爸爸
前面学过一个返回父亲(亲的) parentNode 有所区别
offsetParent 和 parentNode的区别：
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
4/offsetTop 和 style.top 的区别
１．最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
２．offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
３．offsetTop 只读，而 style.top 可读写。
４．如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
５．最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 100px;
background-color: #FF0000;
border: 5px solid #FFA500;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box = document.getElementById('box');
//offsetHeight = 内容 + 内边距 + 边框 ,offset系列只能读取不能操作
console.log(box.offsetHeight,box.offsetWidth); //110 210
//操作只能用.style.width之类的来操作
box.style.width = 300 + 'px';
console.log(box.offsetHeight,box.offsetWidth); //110 310
</script>
</body>
</html>
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
