offsetX各种值总结

转个笔记，原文链接：
offsetX各种值总结

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各种值总结相关推荐

类似淘宝商品放大镜功能，以及offsetX、offsetY造成的鼠标移动时阴影部分会一闪一闪的不断回到左上角问题
效果:效果是当鼠标移入的时候小图出现一小块是以鼠标为中心的遮罩层,鼠标在小图移动时大图放大显示遮罩层所在的局部,且遮罩层不能超出小图位置.如下图所示: html部分从代码可知大图和小图是分别两个im ...
事件模型、事件流（冒泡与捕获）、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
Javascript事件模型系列（一）事件及事件的三种模型
一.开篇在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
08canvas画图
08 Fun with HTML5 Canvas打卡指南作者:@sandystar 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 30 个视频教程.3 ...
audio标签的播放、暂停、重播、进度拖拽等操作
前言最近在做题库项目的时候,需要对听力题进行手动控制等一系列操作,其中最主要的用到的一些方法就是loadeddata.timeupdate.ended等,次功能花了不少时间,此文仅作记录,不喜勿喷, ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
Android---PhotoView
目录准备工作 1.双击放大和缩小 2.惯性滑动 3.双指放大和缩小 4.完整DEMO 准备工作自定义PhotoView 自定义 PhotoView 继承(extends)自 View.并在最中间 ...
JavaScript学习笔记（六）(Jquery入门)
JavaScript学习笔记(六) 一.jQuery是什么? 二.jQuery的安装三.载入事件区别四.jQuery对象和DOM对象的区别 DOM对象和Jquery对象互转五.选择器 5.1 j ...

offsetX各种值总结

offsetX各种值总结相关推荐

最新文章

热门文章