clientX与offsetX、clientWidth与offsetWidth的区别
相关属性介绍
都要结合鼠标事件监听使用
1、client相关属性
获取鼠标位置
鼠标相对于视口的位置
e.clientX e.clientY （e是鼠标对象）
获取节点尺寸
节点.clientWidth; 节点.clientHeight;（返回值为数值）
clientWidth = content宽度 + 左padding + 右padding（即：实际尺寸 不含border和margin，不论是什么盒模型）
clientHeight = content高度 + 左padding + 右padding （即：实际尺寸 不含border和margin，不论是什么盒模型）
获取边框宽度
clientTop = 上边框的宽度
clientLeft = 左边框的宽度
2、offset相关属性
获取鼠标位置
鼠标相对于事件源的位置
e.offsetX e.offsetY （如果鼠标事件为mousemove，则移到子节点时变成相对于子节点的位置）
获取节点尺寸
节点.offsetWidth; 节点.offsetHeight;（返回值为数值）
offsetWidth = content宽度 + 左padding + 右padding + 左boder + 右boder
offsetHeight = content高度 + 左padding + 右padding + 左boder + 右boder
offsetTop：当前节点的 上边框外边缘 到最近的已定位父级（offsetParent） 上边框内边缘 的距离。
offsetLeft：当前元素 左边框外边缘 到最近的已定位父级（offsetParent） 左边框内边缘 的距离。
offsetParent：获取离当前元素最近的已定位父级（即：position有以下属性值之一：relative absolute fixed），如果父级都没有定位，则获取的为body节点
区别
clientX/clientY 的位置是鼠标相对于整个视口的左上角的位置
offsetX/offsetY 的位置是鼠标相对于事件源（即鼠标所停留在的那个节点）的左上角的位置
clientWidth/clientHeight 的尺寸是节点不包含border宽度和margin的尺寸，不论是什么盒模型都不包含
offsetWidth/offsetHeight 的尺寸是节点不包含margin的尺寸
区别图如下
clientX与offsetX、clientWidth与offsetWidth的区别相关推荐
- clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
clientX, clientY | offsetX, offsetY | pageX, pageY的区别: ✍ clientX, clientY:指的是鼠标点击位置距离可视窗口的坐标: 图示:在不拉 ...
- clientWidth、offsetWidth、区别
clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度clientWidth = width+左右padding2,clie ...
- clientX、offsetX、screenX、pageX的区别
一.概念总结 1.event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性.cl ...
- offsetX,offsetLeft,offsetWidth的区别详解
offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示(鼠标位置)相对于最近父级元素的坐标(无论父级是否定位)(不管是谁 ...
- js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高 总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
- clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总）
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
- html5 offsetx,原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分
本篇主要介绍clientLeft.offsetLeft.clientX.offsetX这四种元素属性的区别,首先我们要理解清楚它们的概念: clientLeft:该元素对象的左边框宽度. client ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
- clientWidth、offsetWidth等介绍
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
最新文章
- 值得总结！认真安利7个让人眼前一亮的神仙软件和网站！
- 回调地狱解决方案之Promise
- javascript --- Vue初始化 模板渲染
- 【项目管理】git和码云的使用
- [建议]我对软工有话说（上）
- c语言高亮字符,C语言必背18个程序+190例--语法高亮
- java按钮退出_java – 如何在此程序中添加退出按钮？怎么样“清楚”？
- Linux内核管理之分配掩码（三）
- Cas单点登录配置数据查询用户
- 快捷配置mysql_windows下的mysql的快捷安装方法和简单配置
- 银行招聘考试题库计算机,2019银行招聘计算机试题（一）答案
- zynq阅读文档之通过中断读GPIO输入的编程指导
- 用友u8采购发票如何取消审核
- 程序设计习惯养成计划---二、测试代码
- Linux编译、运行多个java文件
- Android 高级学习心得及项目要点
- struts教程笔记6
- 智汀、米家、苹果homekit智能门锁新体验，打开不一样的大门
- 20M宽带的下载速度到时有没有20MB/s？
- HDU 4966 GGS-DDU [最小树形图]