pageX: 页面X坐标位置

pageY: 页面Y坐标位置

screenX: 屏幕X坐标位置

screenY: 屏幕Y坐标位置

clientX: 鼠标的坐标到页面左侧的距离

clientY: 鼠标的坐标到页面顶部的距离

clientWidth：可视区域的宽度

clientHeight：可视区域的高度

offsetX：鼠标坐标到元素的左侧的距离

offsetY：鼠标坐标到元素的顶部的距离

offsetLeft： 该元素外边框距离包含元素内边框左侧的距离

offsetTop：该元素外边框距离包含元素内边框顶部的距离

offsetWidth: width + padding-left + padding-right + border-left + border-right

offsetHeight: height + padding-top + padding-bottom + border-top + border-bottom

offsetParent: 包含元素

可以通过定位改变包含元素

作者：那麽快樂
链接：https://www.jianshu.com/p/c0eae5eed0e9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

offsetX各种值总结的更多相关文章

  1. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  2. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  3. jacascript 偏移量offset、客户区client

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 偏移量 偏移量(offset dimension)是 javascript 中的一个重要的概念.涉及到偏移 ...

  4. 用CSS3 & jQuery创建apple TV海报视差效果

    用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...

  5. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  6. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  7. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  8. IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件

    IIS 配置 FTP 网站   在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...

  9. JavaScript事件坐标区别（offset，client，page）

    学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...

随机推荐

  1. SonarQube汉化

    SonarQube安装后默认是英文,如果不习惯看英文,可以进行汉化,官方提供了汉化插件. 登录后,汉化步骤如下: 需要点击了解风险,不然查询到插件后没有install按钮 搜索Chinese,找到插件 ...

  2. TP框架 商城前台用户注册方法

    //注册 public function register(){ if(IS_POST){ //接收数据 $data = I('post.'); $model = D('User'); $data[' ...

  3. [转载]CentOS 7 用户怎样安装 LNMP（Nginx+PHP+MySQL）

    关于 Nginx (发音 "engine x")这是一款免费.开源.高效的 HTTP 服务器,Nginx是以稳定著称,丰富的功能,结构简单,低资源消耗.本教程演示如何在CentOS ...

  4. 华为云计算IE面试笔记-eBackup有哪几种备份组网方式，各备份组网方式主要的应用场景及备份流程？

    应用场景: LAN-Base一般用于备份数据量小,且对备份窗口没有特殊要求的场景,此类场景下备份服务器和备份代理一般是虚拟机部署. LAN-Free一般用于备份数据量较大,且对备份窗口要求比较严格的场 ...

  5. P7099-[yLOI2020]灼【数学期望,结论】

    正题 题目链接:https://www.luogu.com.cn/problem/P7099 题目大意 给出\(n\)个坐标轴上的点,\(q\)次询问从某点出发每次等概率向左或者向右一格求到达某个给出 ...

  6. P4585-[FJOI2015]火星商店问题【线段树,可持久化Trie】

    正题 题目链接:https://www.luogu.com.cn/problem/P4585 题目大意 \(n\)个集合,开始每个集合中有一个数字. 开启新的一天并且往集合\(s\)中插入数字\(v\ ...

  7. position的五个不同的位置值

    一.position: static  无定位 HTML 元素默认情况下的定位方式为 static(静态). 静态定位的元素不受 top.bottom.left 和 right 属性的影响. posi ...

  8. centos7.5离线安装Docker及容器运行报OCI runtime create failed 问题定位与解决

    前言 接上篇 <记一次centos挂载ceph存储的坑> 服务器重做了centos7.5版本的操作系统,剩下就是安装docker,考虑yum安装耗时较长,我一般都是直接安装二进制版本doc ...

  9. Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互

    Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 目录 Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 前言 一.效果 二.实现过程 ...

  10. HttpRunner3.X - 全面讲解如何落地项目实战

    一.前言 接触httprunner框架有一段时间了,也一直探索如何更好的落地到项目上,本篇主要讲述如何应用到实际的项目中,达到提升测试效率的目的. 1.项目难题 这个月开始忙起来了,接了个大项目,苦不 ...