学习笔记（setoff家族）"/>
JavaScript学习笔记（setoff家族）
offset的中文是：偏移、补偿、位移。
js中比较简洁的获取元素的尺寸。offset家族包括：
| offsetHight |
|---|
| offsetWidth |
| offsetLeft |
| offsetRight |
| offsetParent |
- offsetWidth
- offsetHeight
- offsetLeft
- offsetRight
- offsetParent
下面分别介绍。
1.offsetWidth 和 offsetHeight
用于检测盒子自身的宽高 + padding + border，不包括margin。如下：
- offsetWidth = 自身width + 自身padding + 自身border;
- offsetHeight = 自身Height + 自身padding + 自身border;
这两个属性，他们绑定在了所有的节点元素上。
获取之后，只要调用这两个属性，我们就能够获取元素的宽和高。
举例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#d1{width: 200px;height: 200px;color: skyblue;border: 40px solid purple;padding: 20px;margin: 100px;}</style></head><body><!-- style="left:300px" --><div id="d1"style="left:300px">helloworld</div><script type="text/javascript">var d1 = document.querySelector("#d1")console.log([d1])console.log(d1.offsetHeight)console.log(d1.offsetWidth)//offsetHeight = content + padding + border//offsetWidth = content + padding + border</script></body>
</html>输出结果：
offsetWidth打印结果是：320（width + padding2 + border2）
2.offsetLeft 和 offsetTop
返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准。
offsetLeft ,offsetTop = 父元素的边框+父元素的内边距+元素的外边距）
举例：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">body{border: 20px solid deeppink;position: relative;padding: 40px;}#d1{width: 200px;height: 200px;color: skyblue;border: 40px solid purple;padding: 20px;margin: 100px;}</style></head><body><!-- style="left:300px" --><div id="d1"style="left:300px">helloworld</div><script type="text/javascript">var d1 = document.querySelector("#d1")console.log([d1])console.log(d1.offsetTop)console.log(d1.style.left)</script></body>
</html>输出结果：
offsetTop = (d1.margin(100px) + body.padding(40px) + body.border(20px))
offLeft同理
3.offsetParent
检测父系盒子中带有定位的父盒子节点，返回结果是该对象的父级（带有定位）。
- 如果当前元素的父元素，没有css定位，那么offsetParent的返回结果为body。
- 如果当前元素的父级元素，有css定位，那么offsetParent的返回结果为距离当前元素坐进的父元素。
<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">body{border: 20px solid deeppink;position: relative;padding: 40px;}.parent{width: 600px;height: 600px;border: 1px solid black;}#d1{width: 200px;height: 200px;color: skyblue;border: 40px solid purple;padding: 20px;margin: 100px;}</style></head><body><!-- style="left:300px" --><div class="parent"><div id="d1"style="left:300px">helloworld</div></div><script type="text/javascript">var d1 = document.querySelector("#d1")console.log([d1])console.log(d1.offsetParent)</script></body>
</html>
setoffParent的输出结果为：body
虽然的d1的父级元素为.Parent 但是.Parent并未添加css定位，所以返回结果为body.
offsetLeft和style.left之间的区别
（1）.最大区别就是：
offsetLeft可以返回没有定位盒子的距离为左侧的位置
如果父系盒子中都没有定位，以body为准。
offset.left只能获取行内式，如果没有，则返回“”（意思是，返回空）；
（2）offsetTop返回的是数字，而style.top返回的是字符串，而且还有带单位：px.
举例：
div.offsetLeft = 100;
div.style.left = "100px"
（3）offsetLeft和offsetTop 只读，而style.left和style.top可读写（只读是获取值，可写是赋值）
（4）如果没有给HTML 元素指定过top样式，则style.top返回的是空字符串。
总结：我们一般的做法是：用offsetLeft和offsetTop获取值，用style.left和style.top赋值，理由如下：
- style.left:只能获取行内式，获取的值可能为空，容易出现NAN。
- offsetLeft:获取值特别方便，而且是现成的number，方便计算，它是只读的，不能赋值。
更多推荐
JavaScript学习笔记（setoff家族）
发布评论