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. jmeter 录制排除模式

    jmeter录制时,静态的资源不需要,可以在录制的时候直接排除. .*\.(bmp|css|js|gif|icov|jpeg|png|swf|woff|woff2|htm|html).* .*\.(j ...

  2. 如何在Ubuntu 18.04安装Git

    在Ubuntu 18.04安装Git 更新apt包列表 apt-get update -y apt-get upgrade -y 安装Git: apt install git 检查Git版本 git ...

  3. Spirit带你彻底搞懂JS的6种继承方案

    JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){ ...

  4. 什么？你还不明白自动化的POM设计模式？

    POM简介.POM优势.如何设计POM POM简介 Page Object Model (POM) 直译为"页面对象模型",这种设计模式旨在为每个待测试的页面创建一个页面对象(cl ...

  5. netty系列之:使用netty搭建websocket客户端

    目录 简介 浏览器客户端 netty对websocket客户端的支持 WebSocketClientHandshaker WebSocketClientCompressionHandler netty ...

  6. Azure Devops实践（5）- 构建springboot项目打包docker镜像及容器化部署

    使用Azure Devops构建java springboot项目,创建镜像并容器化部署 1.创建一个springboot项目,我用现有的项目 目录结构如下,使用provider项目 在根目录下添加D ...

  7. 数据应用的变与不变，ShardingSphere 正在影响未来数字体验的建设理念

    近年来关于底层数据库的开源产品越来越多,它们也受到了许多资本的青睐. 伴随着移动互联网催生的数字化场景爆发,云计算.大数据等技术逐渐有了更加广阔的应用场景.在云计算和大数据经过十年的追赶式发展后,不只 ...

  8. SpringBoot入门04-组件扫描ComponetScan

    被扫描的包下面的类如果被下面注解,则被创建加入到IOC中去 @Component:没有明确的角色 @Service:业务层角色 @Repository:持久层角色 @Controller:控制层角色 ...

  9. [技术博客] 利用SharedPreferences来实现登录状态的记忆功能

    [技术博客] 利用SharedPreferences来实现登录状态的记忆功能 一.SharedPreferences简介 SharedPreferences是Android平台上一个轻量级的存储辅助类 ...

  10. 2021.7.17 NKOJ周赛总结

    发现自己简直是个智障:T1模数写成1e9+9:T2居然没有考虑刚好一个周期的情况:T4用"%lld"读入"unsigned long long".~qwq~ T ...