DOM初探（17）——查看元素的尺寸与位置

四：DOM基本操作：

查看元素的尺寸：

dom.offsetWidth,dom.offsetHeight(视觉上的宽高，不可能包含margin)

查看元素的位置：

dom.offsetLeft,dom.offsetTop

对于无定位父级的元素，返回相对文档的坐标；

对于有定位父级的元素，返回相对最近的有定位的父级的坐标。

dom.offsetParent

返回最近的有定位的父级，如无，返回body,body.offsetParent返回null

查看元素的尺寸：

dom.offsetWidth,dom.offsetHeight(视觉上的宽高，不可能包含margin)

现在我给div加个padding：100px；

说明这个div.offsetWidth返回的是元素看起来的宽高吧！！你在看，这个div.offsetWidth和div.getBoundingClientRect()返回的结果是一样的吧，所以这个div.offsetWidth就把div.getBoundingClientRect()给取代了。

那，我就是想求div内容区的宽高是多少，怎么办？

查看元素的位置：

dom.offsetLeft,dom.offsetTop

但是这两个方法，没有咱们想想的这么理想。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>abraham</title><style>.div1{width: 300px;height: 300px;border: 2px solid black;position: relative;top: 100px;left: 100px;}.div2{width: 100px;height: 100px;position: absolute;top: 100px;left: 100px;background-color: red;}</style></head><body><div class="div1"><div class="div2"></div></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];</script></body>
</html>

为什么里面的div会在外面div的中间？

基于有定位的父级定位吧！！

那如果里面的那个div不是通过改变left和top实现的，是通过改变margin实现的呢？

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>abraham</title><style>.div1{width: 300px;height: 300px;border: 2px solid black;position: relative;top: 100px;left: 100px;}.div2{width: 100px;height: 100px;position: absolute;margin-top: 100px;margin-left: 100px;background-color: red;}</style></head><body><div class="div1"><div class="div2"></div></div><script type="text/javascript">var div = document.getElementsByClassName("div2")[0];</script></body>
</html>

红色的方块还是在原来的位置，并且这个还是100px，

说明div.offsetLeft的含义：忽略自身是否为定位元素，他求的只是这个元素距离他有定位的父级的距离(不管这个距离是怎样生成的)。

下面试试，把他外面的父级也变成不定位的，

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>abraham</title><style>.div1{width: 300px;height: 300px;border: 2px solid black;position: static;/* static是position的默认是，静态的意思 */margin-top: 100px;margin-left: 100px;}.div2{width: 100px;height: 100px;position: absolute;margin-top: 100px;margin-left: 100px;background-color: red;}</style></head><body><div class="div1"><div class="div2"></div></div><script type="text/javascript">var div = document.getElementsByClassName("div2")[0];</script></body>
</html>

这次你猜猜div.offsetLeft是什么了？

他的父级没有定位，返回的是文档的坐标吧！

那200px知道是怎么回事，还有一个边框2px，200+2=202，为什么是210px呢？那8px是哪里来的？

咱们是不是说过body里面有个margin 8px！！！

为什么div.offsetTop是202px呢？

是不是纵向的margin塌陷了！

练习41：求相对文档的坐标getElementPosition

视频：https://ke.qq.com/course/231577?taid=3983676656552089

DOM初探（17）——查看元素的尺寸与位置相关推荐

JavaScript DOM 9 - 元素的尺寸与位置
1: 获得页面上某个元素在视口坐标系的位置和元素的尺寸: element.getBoundingClientRect():{ left:8top:104right:1432bottom: 158wid ...
jQuery：设置获取属性、遍历添加删除元素、尺寸、位置
目录一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容三.jQuery对元素操作 1.遍历元素 2.创建 ...
javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
在学习offset的相关属性前,必须明确指出offsetHeight/Width.offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值(例如,返回12,而不是'12px ...
DOM初探（16）——查看元素的集合尺寸
三:DOM基本操作: 查看元素的集合尺寸 domEle.getBoundingClientRect(); 兼容性很好改方法返回一个对象,对象里面有left,top,right,bottom等属性.l ...
DOM初探（15）——查看视口的尺寸
视频:https://ke.qq.com/course/231577?taid=3983676656552089 二:DOM基本操作: 查看视口的尺寸 window.innerWidth/innerH ...
前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
DOM初探（14）——查看滚动条的滚动距离
一:DOM基本操作: 查看滚动条的滚动距离 window.pageXOffset/pageYOffset IE8及以下不兼容(只有IE9以上的浏览器能用) document.body/document ...
Web APIs-事件流、事件委托、其他事件、元素尺寸与位置
目录事件流事件捕获事件冒泡阻止冒泡解绑事件事件委托其他事件 1.页面加载事件 2. 页面滚动事件 3.页面尺寸事件元素尺寸与位置今日单词综合案例事件流事件完整执行过程中的流动路 ...
JS 查看标签下某元素所有信息（查看元素，查询元素，遍历元素、HTMLCollection对象、NodeList对象）
NodeList 对象是一个从文档中获取的节点列表 (集合) . NodeList 对象类似 HTMLCollection 对象. 一些旧版本浏览器中的方法(如:getElementsByClassN ...

DOM初探（17）——查看元素的尺寸与位置

DOM初探（17）——查看元素的尺寸与位置相关推荐

最新文章

热门文章