JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别
/*在事件的内部console.dir(event)*/
/**
* 事件对象event
* clientX/clientY 获取鼠标基于浏览器窗口（可视区域的坐标位置）全兼容
*
* pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容
* -- 兼容方案：clintY+页面滚动出去垂直距离
* */ /**
* console.dir(element)
* 元素element
* offsetLeft/offsetTop 获取基于offsetParent<--当前元素的定位父级元素>相对的坐标值
* offsetWidth/offsetHeight 获取元素的实体范围的宽高 content+padding+border
* scrollLeft/scrollTop 获取元素滚动出去的距离
* scrollWidth/scrollHeight 滚动框里面的盒子(滚动元素)大小 不常用
* clientHeight/clientWidth 获取盒子的宽高，不包含滚动条
* */
JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别的更多相关文章
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...
- scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的差别及使用方法
这几个属性做滚动时会经经常使用到.现总例如以下: 首先定义一个div.样式例如以下: <style> *{ margin:0px; padding:0px;} body{ margin:0 ...
- javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- 如何更好的理解（pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY，offsetLeft,style.left）
1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY
总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...
- pageX/pageY,screenX/screenY,clientX/clientY的差别
pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...
随机推荐
- 跟我一起学koa之在koa中使用mongoose（四）
第一步安装mongoose,创建数据库文件夹 第二步引入mongoose,连接数据库 第三步运行项目 这个报错 只需要将es6写法变成es5写法即可 我们连接数据库,并且以post请求的方式插入数据 ...
- git的三个区域比较
工作区: 暂存区: 提交区: 工作区与暂存区比较:git diff 工作区与提交区比较:git diff 提交hash码或者HEAD 暂存区与提交区比较:git diff --cached 两个不同提 ...
- UOJ261 【NOIP2016】天天爱跑步 LCA+动态开点线段树
UOJ261 [NOIP2016]天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.天天爱跑步是一个养成类游戏,需要玩家每天按时上线, ...
- 【codeforces 499C】Crazy Town
[题目链接]:http://codeforces.com/problemset/problem/499/C [题意] 一个平面,被n条直线分成若干个块; 你在其中的某一块,然后你想要要到的终点在另外一 ...
- Django项目：CMDB(服务器硬件资产自动采集系统)--02--02CMDB将服务器基本信息提交到API接口
AutoCmdb # urls.py """AutoCmdb URL Configuration The `urlpatterns` list routes URLs t ...
- Webpack下创建vue项目-非vue-cli
开始准备 初始化工程目录 shell npm init -y 安装vue npm install vue 安装 webpack npm install webpack --save-dev webpa ...
- 【vue移动端架子】vue-h5-template
作者大大的地址:https://github.com/sunnie1992/vue-h5-template 我们运行项目,倒是可以看一看效果 虽然就是显示的UI,但是应该可以知道作者大大想要什么东西了 ...
- NoClassDefFoundError: Could not initialize class org.apache.cxf.jaxrs.provider.ProviderFactory org.springframework.aop.support.AopUtils.isCglibProxyClass
报错: 2018-05-03 10:35:20 377 ERROR org.apache.juli.logging.DirectJDKLog.log:181 - Servlet.service() f ...
- android 数据绑定(1)Ativity、Fragment、Item绑定数据源
1.简介 官方文档: https://developer.android.com/topic/libraries/data-binding 官方示例: https://github.com/andr ...
- web前端学习（一） j2ee环境搭配+jsp中的编码问题
jsp中的编码问题 pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容编码 我安装tomcat的方法是 安装j2ee的eclipse ...