clientX和clientHeight

2024-09-05

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度. offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离 offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用注意: 1.当对象的offsetParent属性指向

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

一.写在前面在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offsetX 先统一了解下这四个概念,理解不透没关系,咱们把概念相近的对比着一一细说. pageX:鼠标指针距离文档X轴左侧边缘的距离,不随滚动条变化而变化 clientX:鼠标指针距离可视窗口左侧边缘的距离,随着滚动条变化而变化 screenY:鼠标指针距离屏幕的距离(包括浏览器工具栏之类),不随滚动条变化

clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,

页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆,所以整理在这里,备忘,待查. 1.客户区坐标位置(clientX/clientY) 我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中的水平和垂直坐标. 示意图: 2.屏幕坐标位置(screenX/scrennY) 通过event事件对象的screenX

JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.

CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别

转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/ 四.元素视图属性关于元素大小位置等信息的一些属性.有:clientLeft和clientTopclientWidth和clientHeightoffsetLef

clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event.pageY:事件对象加上滚动距离后的垂直偏移量: 3.$(selector).scrollLeft(offset):获得或设置对象的滚动水平位置: $(selector).scrollTop(offset):获得或设置对象的滚动垂直位置: 4.div.offsetLeft:对象的水平偏移量: di

screenX、clientX、pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠标指针位置相对于用户屏幕

clientX,screenX,pageX,offsetX的异同【转载】

首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了. 特别说明:IE不支持! offsetX/offsetY: 得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为: 特别说明:只有IE支持!相当于IE下的pageX,pageY. screenX/screenY:

js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011-07-28 17:20 6532人阅读评论(1) 收藏举报浏览器firefoxopera文档htmlie 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offs

scrollLeft、offsetLeft、clientLeft、clientHeight详解

offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 scrollLeft.offsetLeft.clientLeft.clientHeight详解 scrollHeight: 获取对象的滚动高度,对象的实际高度: scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的

理解screenX clientX pageX概念

先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点不会随之滚动条的移动而移动. pageX: 参照点也是浏览器内容区域的左上角,但它会随着滚动条而变动下面看看具体的各个对象中的这些属性 window对象 (1)window.screenX,window.screenY 返回浏览器窗

clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解

clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变兼容性:除IE6/7/8不支持外,其余浏览器均支持 offsetX/Y: offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左

clientHeight、offsetHeight、scrollHeight详解

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的高); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: d

扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解

先上个pc端和手机端的图: 说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class="out"> <div class="in"></div> </div> css: .out{ width: 300px; height: 300px; background: skyblue; overflow: hidden; } .i

JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight //返回元素的高度(包括元素高度.内边距和边框,不包括外边距) clientWidth

offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content的高度) el.scrollHeight = 整个元素的高度 ( 包括了clientHeight看不到的那部分,一般就是你css设置的元素高度) el.offsetTop = 子元素的外边框到父元素的内边框的垂直距离 (没边框时自然就是content到content的距离) el.offsetLef

元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. (触发事件的元素,ie,chrome支持此属性,ff不支持)event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y

clientX和clientHeight

热门专题