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
DOM获取元素位置的三大系列offset/scroll/client相关推荐
- js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
- dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
- javascript js jquery获取元素位置代码总结
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部 ...
- js之DOM获取元素,更改属性
js之DOM获取元素,更改属性 Web Api基本认知 作用和分类 什么是DOM DOM树 DOM对象 获取DOM对象 设置/修改DOM元素内容 document.write() 方法 对象.inne ...
- JavaScript DOM获取元素
API 和Web API 1.API API ( Application Programming Interface,应用程序编程接口)是一些预先定 义的函数,目的是提供应用程序与开发人员基于某软件 ...
- 《web开发: JavaScript DOM获取元素》
一.JavaScript DOM获取元素 1. 如何获取页面元素 DOM在我们实际开发中主要用来操作元素 获取页面中的元素可以使用以下几种方式: (下面的方法都是Web APIs) 根据 ID 获 ...
- Dom基础 特殊的节点 获取元素节点的内容 获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素(标签)、 正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
- JS DOM获取元素属性+操作方法
JS DOM获取元素属性+操作方法 文章目录 JS DOM获取元素属性+操作方法 基础属性 title属性 tagName属性 : 获取标签名 className属性 : 获取类名 Nodelist. ...
最新文章
- Centos用yum安装X Winodw
- QIIME 2教程. 14数据评估和质控q2-quality-control(2021.2)
- Visual Studio 2017为Android APK包签名
- linux文件目录类命令|--rmdir指令
- 激光点云格式转换 bin-to-pcd
- 1、数据库是什么?关系型数据库和非关系型数据库又是什么?
- echo回声不能用了_回声消除的昨天、今天和明天
- php分页排序不变化,php – 计算已排序分页的给定记录的跳过值
- 颠覆游戏开发,虚幻引擎 UE5 正式发布
- 菜鸟学python-基础(2)
- div+css,表单和表格 学习笔记
- 网上书店软件测试,网上书店测试用例.doc
- git 拉取子目录 child-dir (父目录为:parent-dir)
- 给春节的宴客小吃来点小惊喜---绿茶甜心曲奇
- 下列不能用作存储容量单位的是
- “知识库系统”的一些思考
- 报错ConnectionString属性尚未初始化。
- JS判断对象是否为空对象的几种方法
- 垃圾分类共享网站的设计与实现(SSM)
- stc15系列c语言pwm编程,STC单片机C语言程序设计 第25章 STC单片机增强型PWM原理及实现.docx...
热门文章
- P16对member进行代码生成时,访问端口出现This application has no explicit mapping for /error, so you are seeing this
- 人工智能-机器学习=深度学习-其他
- 图像处理学习--前篇--像素相关
- Verilog功能模块——降采样
- Endnote X9安装教程
- 计算机视觉与深度学习 | 基于多源传感器数据融合的动态场景SLAM研究
- html阴影特效作品及代码,纯CSS做特效网页(阴影,透明,画圆圈等等)
- mysql accessdenies_mysql Access denied for user root@localhost错误解决方法总结(转)
- tornado celery mysql_Python3.7+Tornado5+Celery3+Rabbitmq3实现异步队列任务
- java循环基础知识_Java基础知识·循环语句