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. 替代jquery中的几个函数

    // https://open.alipay.com/developmentAccess/developmentAccess.htm var $ = window.jQuery; (function( ...

  2. git 报错 gitThere is no tracking information for the current branch. Please specify which branch you w

    新建本地分支后将本地分支推送到远程库, 使用git pull 或者 git push 的时候报错gitThere is no tracking information for the current ...

  3. P4774-[NOI2018]屠龙勇士【EXCRT】

    正题 题目链接:https://www.luogu.com.cn/problem/P4774 题目大意 \(n\)个龙血量为\(a_i\),回复能力为\(p_i\),死亡后掉落剑的攻击力\(t_i\) ...

  4. CF848E-Days of Floral Colours【dp,分治NTT】

    正题 题目链接:https://www.luogu.com.cn/problem/CF848E 题目大意 \(2n\)个花排成一个圆环,\(n\)种颜色每种两个,要求两个相同颜色之间最小距离为\(1, ...

  5. Java基础之（八）：顺序结构与选择结构

    顺序结构 Java的基本结构就是顺序结构 顺序结构是最简单的算法结构 它是任何一个算法都离不开的一种基本算法结构. 例子: public static void main(String[] args) ...

  6. AT3950 [AGC022E] Median Replace

    题目传送门 Description 有一个长度为 \(n\) 的 \(01\) 串,里面有一些还没有确定,我们标记为 ? .可以进行若干次操作,每次操作可以把三个相邻的数替换成它们的中位数.问有多少种 ...

  7. 解决更新页面版本后用户需CTRL+F5强刷才能应用最新页面

    设置文件永远不从缓存读取 第一步:在html文件设置文件不缓存 <!DOCTYPE html> <html lang="en" class="theme ...

  8. SpringCloud微服务实战——搭建企业级开发框架（二）：环境准备

    这里简单说明一下在Windows系统下开发SpringCloud项目所需要的的基本环境,这里只说明开发过程中基础必须的软件,其他扩展功能(Docker,k8s,MinIO,XXL-JOB,EKL,Ke ...

  9. 分库分表利器之Sharding Sphere（深度好文，看过的人都说好）

    Sharding-Sphere Sharding-JDBC 最早是当当网内部使用的一款分库分表框架,到2017年的时候才开始对外开源,这几年在大量社区贡献者的不断迭代下,功能也逐渐完善,现已更名为 S ...

  10. 80. 删除有序数组中的重复项 II

    题目 给你一个有序数组 nums ,请你原地删除重复出现的元素(不需要考虑数组中超出新长度后面的元素),使每个元素最多出现两次 ,返回删除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入 ...