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. redis 设置密码 laravel框架配置redis

    * 参考资料 redis文档             http://www.redis.cn/documentation.html,  http://redisdoc.com/index.html r ...

  2. k8s-PodApi对象

    init容器 pod的生命周期钩子 资源限制 podApi对象概览 apiVersion + kind  一个是版本 一个是资源组  共同确定当前yaml由谁来管理 metadata元数据 用来唯一标 ...

  3. 为什么 Dapr 如此令人兴奋

    如今你构建软件,您可以从数量众多的云服务中进行选择.仅 AWS 就每个月都在不断为其200多项服务添加新服务,而其他云提供商也都在跟上. 如果您的公司想与您的竞争对手竞争,您就需要充分利用这些服务,这 ...

  4. 5-让出CPU执行权的yield方法

    让出CPU执行权的yield方法 Thread类有一个静态的yield方法,当一个线程在调用yield方法时,实际上就是暗示线程调度器请求让出自己的CPU使用,但是线程调度器可以无条件忽略这个暗示. ...

  5. 阿里P8面试官：如何设计一个扛住千万级并发的架构？

    大家先思考一个问题,这也是在面试过程中经常遇到的问题. 如果你们公司现在的产品能够支持10W用户访问,你们老板突然和你说,融到钱了,会大量投放广告,预计在1个月后用户量会达到1000W,如果这个任务交 ...

  6. PAT (Basic Level) Practice （中文）1014 福尔摩斯的约会 (20分)

    1014 福尔摩斯的约会 (20分) 带侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hys ...

  7. K12教培从业者转型指南 换个赛道依然可以再创辉煌

    随着"双减"政策的落地,属于K12教培机构的时代逐渐拉上帷幕,面对机会不再的K12教培行业,约70万机构和近千万的从业人员面临转型问题.压力之下,留下或离开?对广大K12教培机构从 ...

  8. Linux中使用dd制作文件的.img

    dd if=/dev/zero of=new_img.img bs=1M count=20   //生成20M的文件,bs块的大小,count块的数量 mkfs.ext3 new_img.img  / ...

  9. SpringCloud微服务实战——搭建企业级开发框架（四）：集成SpringCloud+SpringBoot

    1.在GitEgg工程的根目录,最上级父pom.xml文件中引入需要依赖的库及Maven插件,设置编码方式: <!--?xml version="1.0" encoding= ...

  10. Go语言核心36讲（Go语言进阶技术七）--学习笔记

    13 | 结构体及其方法的使用法门 我们都知道,结构体类型表示的是实实在在的数据结构.一个结构体类型可以包含若干个字段,每个字段通常都需要有确切的名字和类型. 前导内容:结构体类型基础知识 当然了,结 ...