DOM获取元素位置的三大系列offset/scroll/client

2019独角兽企业重金招聘Python工程师标准>>>

我们使用元素.style.left在style标签中设置的样式的值都获取不到。 现在就说一下三大系列吧，首先明确document下如何直接获取元素。

document下直接获取元素

• 直接获取title console.log(document.title);//获取的是title标签中的值
• 直接获取body(IE8不支持，使用document.documentElement) console.log(document.body);
• 直接获取html console.log(document.html)
• 由于js是动态类型的语言,对象可以直接通过.的方式添加属性,如果属性没赋值，则是undefined,如果赋值就有结果。

在介绍三大系列前，可先看一下这张图：

offset系列

• offsetLeft:元素在页面中的当前位置距离页面左侧的像素(不准确的)
• offsetTop：元素距离上面的距离（像素）
• offsetWidth：元素在页面中的宽度
• offsetHeight：元素在页面中的高度
• offset:获取的是数字类型的值,没有px
• 元素的offsetLeft获取的时候:
  • 包含:父级元素的border的宽度,不会包括自己的边框
  • 包含:父级元素的margin-left,也包含自己的margin-left
  • 包含:父级元素的padding-left,不包括自己的padding-left
• 注意:父级元素脱离文档流,子级元素也脱离文档流,此时只有自己的left,不包括父级的left
• 注意:父级元素脱离文档流,自己元素没有脱离文档流,此时相对于父级的是0
• 以上这些属性的值都是可读不可写(能够获取-能够读取到,不可写:不能赋值--不能设置)

console.log(dvObj.offsetWidth);//宽度
console.log(dvObj.offsetHeight);
dvObj.offsetHeight="1000";

scroll系列

• scrollHeight:层中内容实际的高度
• scrollWidth:层中内容实际的宽度
• scrollLeft:层中内容卷曲出去的内容，就是层中内容拉动滚动条滚出去的距离（左右方向拉动滚动条）
• scrollTop:层中内容卷曲出去的内容，就是层中内容拉动滚动条滚出去的距离（竖直方向拉动滚动条）
• 滚动条事件：onscroll
• 元素设置了定位，就会脱离标准流，下面的元素就会直接跳上去；固定导航栏设置了定位fixed中下面内容直接跳上去的问题

console.log(dvObj.offsetHeight);
console.log(dvObj.scrollHeight);//层中内容的高度
console.log(dvObj.scrollTop);

client系列

• clientX和clientY是可视区域的坐标，获取不到滚动条拉动的时候向上滚出去的距离；兼容问题：事件参数e（有关事件的疑问可以查看我的下一篇博客: DOM事件详解）在IE8中没有，在谷歌浏览器中有;IE8中有window.event.clientX
• 事件参数兼容写法：e=e||window.event;
• e.clientX和e.clientY是可视区域的坐标
• e.pageX和e.pageY才是真正的文档的坐标
• 兼容的写法是:e.client+document.body.scrollTop==e.pageY

注意点

• 当前移动元素的父级元素的margin值会影响当前移动的元素的位置。
• 涉及到很多的兼容问题，一定要多测试，写出可以解决兼容问题的代码，可查看我的博客XXXX
• 元素margin-left和元素的margin-top会可能影响元素和鼠标之间的距离
• 当前移动元素的父级元素的margin值会影响当前移动的元素的位置
• 清除选中 window.getSelection?window.getSelection().removeAllRange():document.selection.empty();

试一试

• 完整的轮播图(点击页码切换图片,左右焦点切换图片,无缝连接)(代码：http://git.oschina.net/yxmBetter/Carousel-figure)
• 固定导航栏(导航栏设置了定位，就脱标了，下面的元素会直接跳上去，解决方法：下面内容设置marginTop或者paddingTop即可。)
• div层中内容随滚动条移动
• 淘宝鼠标放到小图片上会显示对应位置大图(地址：http://git.oschina.net/yxmBetter/Enlarge-Image)

三大系列具体的情况，在使用的时候具体测试一下就可以，只要了解使用哪些更合适就可以了，加油！

转载于:https://my.oschina.net/yxmBetter/blog/829797