【client / page / offset / screen X / Y】的更多相关文章

client / page / offset / screen X / Y

1.clientX / clientY 相对于可视窗口左上角,不包括菜单栏与滚动条 2.pageX / pageY 相对于网页左上角,不包括菜单栏,包括滚动条 3.offsetX / offsetY IE特有! 以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值. 4.screenX / screenY 相对于屏幕左上角 pageX和clientX ,这个两个比较容易搞混, pageX:与滚动条移动有关 clientX:与滚动条移动无关…

浅谈event.client、event.screen与event.offset

每每看到event.client.event.screen与event.offset这几个,头都大了,今天又碰到了,特来总结下. 1.event.screenX与event.screenY. 首先,event.screenX是鼠标相对于用户显示器屏幕左上角的X坐标. 而event.screenY则是鼠标相对于用户显示器屏幕左上角的Y坐标. 在标准事件和IE事件中都定义了这2个属性 2.event.clientX与event.clientY. event.clientX是鼠标相对于浏览器窗口可视区…

client/scroll/offset width/height/top/left ---记第一篇博客

client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左padding+右padding(如果有竖滚动条,那么要减去17px)        clientHeight height+上padding+下padding(如果有横滚动条,那么要减去17px)        clientTop   border-top-width上边框宽度        cli…

scroll、client和offset的区别

scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html…

前端 ---client、offset、scroll系列

client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; bor…

python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以实现效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s…

4.client、offset、scroll系列

client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了就是边框的乱度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度 client演示 <!DOCTYPE html> <html> <head> <meta cha…

screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()

screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 JS原生事件的写法 ① document.onclick = function(){ alert(1); //只要是点击页面的任何一个地方,…

JS client(X,Y)、screen(X,Y)、page（X,Y）的区别

clientX:光标相对于当前窗口的水平位置: clientY :光标相对于当前窗口的垂直位置: screenX :光标相对于该屏幕的水平位置: screenY:光标相对于该屏幕的垂直位置: pageX :光标相对于当前文档的水平位置: pageY :光标相对于当前文档的垂直位置:…

client offset screen 的区别

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