offsetParent、offsetTop、offsetLeft、offsetHeight、offsetWidth

1.offsetParent:获取第一个定位的父元素,如果所有父元素都没有定位,则返回body:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>location</title><style>.content {height: 500px;width: 500px;margin: 0 auto;background-color: pink;}.father {height: 400px;width: 400px;background-color: #ccc;}.son {height: 300px;width: 300px;background-color: #000;}</style><script>window.addEventListener('load', function() {let sonDiv = document.querySelector('.son');console.log(sonDiv.offsetParent);});</script>
</head><body><div class="content"><div class="father"><div class="son"></div></div></div>
</body></html>

给content加上定位:

.content {position: relative;height: 500px;width: 500px;margin: 0 auto;background-color: pink;
}

这时获取到的offsetParent是content盒子.

2.offsetTop、offsetLeft:距离offsetParent上边框、左边框的内侧的距离(不包含边框的宽度):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>location</title><style>.content {position: relative;padding-top: 50px;border-top: 10px solid #ccc;height: 500px;width: 500px;margin: 0 auto;background-color: pink;overflow: hidden;}.father {margin: 50px;height: 400px;width: 400px;background-color: #ccc;overflow: hidden;}.son {border-top: 10px solid red;margin: 50px;height: 300px;width: 300px;background-color: #000;}</style><script>window.addEventListener('load', function() {let sonDiv = document.querySelector('.son');console.log('offsetTop: ' + sonDiv.offsetTop);console.log('offsetLeft: ' + sonDiv.offsetLeft);});</script>
</head><body><div class="content"><div class="father"><div class="son"></div></div></div>
</body></html>

这里的content为相对定位,有:(1)10px的上边框,(2)50px的上内边距,(3)father盒子有50px的外边距,(4)son盒子有50px的外边距,(5)10px的上边框,可以计算出offsetTop:(2) + (3) + (4) = 150px,offetLeft:(3) + (4) = 100px.

3.offsetHeight、offsetWidth:元素高度和宽度,包括边框、内边距、内容:

window.addEventListener('load', function() {let sonDiv = document.querySelector('.son');console.log('offsetHeight: ' + sonDiv.offsetHeight);console.log('offsetWidth: ' + sonDiv.offsetWidth);
});

这里offsetHeight为10px的上边框+width(300px) = 310px,offsetWidth为width:300px;

offsetParent、offsetTop、offsetLeft、offsetHeight、offsetWidth相关推荐

一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）
快速理解offset之间的区别 1.offsetWidth与offsetHeight 2.offsetParent 3.offsetleft.offsetTop 以下代码均在Chrome浏览器中测试 ...
offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> 假设 obj 为某个 H ...
深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别
深度剖析offsetParent.offsetTop.offsetLeft和ParentNode的区别 ParentNode: 是直接结构上的父级,并不是显示父级 offsetParent: 有点类似 ...
网页宽高clientWidth、offsetWidth、offsetTop 、offsetLeft宽高解析
style.width:样式宽 clientWidth:样式宽+padding(可视区宽) (如果有滚动条还要包括滚动条的宽度) offsetWidth:样式宽+padding(可视区宽)+borde ...
html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云阅读:223 作者 ...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
offsetLeft、offsetTop全面解析
offsetLeft.offsetTop全面解析一.第一个小例子 <body> <style>body { margin:0; }.box1 { width:300px; h ...
【JavaScript】全面解析offsetLeft、offsetTop
前言:偏移量,很多动画效果的实现都是通过去改变偏移量的改变来实现的,但是你真的完全了解offsetLeft,offsetTop吗? 一.第一个小例子 <body> <style> ...

offsetParent、offsetTop、offsetLeft、offsetHeight、offsetWidth

offsetParent、offsetTop、offsetLeft、offsetHeight、offsetWidth相关推荐

最新文章

热门文章