对offsetLeft,clientX系列属性的理解

最新推荐文章于 2022-05-08 23:22:37 发布
最新推荐文章于 2022-05-08 23:22:37 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： css web html 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34109078/article/details/72784520
版权
web 同时被 3 个专栏收录
14 篇文章 1 订阅
订阅专栏
css
9 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

最近在看html5和css3权威指南，跟着书本做了相应的练习，在学到拖动章节想到了之前遇到的一个阿里面试题涉及到利用mouse事件模拟拖动，于是就研究了一下，发现自己对offsetLeft,clientX相关属性不是很熟悉，决定总结一下，上网查资料的时候发现了这篇博文，写的很全面，正好就是我想要的，我就偷个懒转载啦element元素节点属性

fighting_today_cui
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三大系列：offset，scroll，client
weixin_47450807的博客
03-07 1126
一、写在前面 之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。 二、offset系列 1、offsetWidth属性 offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。 offsetWidth是只读属性 2、offsetHeight属性 offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 + offsetHeight是只读属性
比较全面的event对像在IE与FF中的区别 推荐
09-05
不过，两者都支持`event.clientX`和`event.clientY`，这两个属性可以获取相对于视口的鼠标坐标，不包括滚动条的影响。 要获取鼠标相对于元素的坐标，IE使用`event.offsetX`和`event.offsetY`，Firefox则提供了`...
js的offsetleft属性的用法
混世小妲己
05-08 1万+
obj.offsetleft, 此属性是只读的，不能够赋值 此属性可以返回当前元素距离某个父辈元素左边缘的距离： 如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。 如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。 实例一：有定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:/
js-DOM offsetLeft 属性与 offsetTop 属性，制作网页动画等必学知识！
weixin_57269725的博客
10-16 3534
目录 前言 一、offsetLeft与offsetTop属性 1、offsetLeft的定义和用法 2、offsetTop的定义和用法 结束语 前言 在制作动画的时候，我们常常需要用到offsetLeft属性来得到盒子的左偏移量，那它具体的原理是什么呢？ 今天我们就来学习学习！ 一、offsetLeft与offsetTop属性 1、offsetLeft的定义和用法 offsetLeft 是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。
html中offsetleft属性,详解 javascript中offsetleft属性的用法
weixin_31476341的博客
06-08 1058
此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。(1).如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。(2).如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。语法结构:obj.offsetleft特别说明:此属性是只读的，不能够赋值。代码实例:蚂蚁部落*{margin: 0px;padding: 0px;}#main{...
关于offsetLeft，offsetTop,offsetWidth，offsetHeight的介绍
javaerwht的博客
04-03 1318
最近被宽高，偏移搞得很头大，找出时间专门对这几个进行分类和总结： offsetLeft: HTMLElement.offsetLeft 是一个只读属性，返回值是 当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。 对于块级元素来说offsetTop、offsetLeft、offsetWidth 及 offsetHeight描述了相对于父节点元素的边界...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
整理的比较全的event对像在ie与firefox浏览器中的区别
09-04
通用的方法是利用元素的`offsetLeft`和`offsetTop`属性来获取元素相对于其最近定位祖先元素的位置。 对于获取标签的坐标，IE提供了`style.posLeft`和`style.posTop`，但Firefox不支持这些非标准属性。通用的解决...
Javascript拖拽拖放系列文章3之细说事件对象第1/4页
12-04
在拖拽拖放系列文章的后续部分，很可能会进一步讨论如何利用这些事件对象的属性和方法来实现复杂的拖放功能，例如计算元素相对于父元素的位置（如`offsetLeft`和`offsetTop`），或者处理多浏览器的兼容性问题。理解...
html中offsetleft属性,offsetleft兼容性的理解
weixin_36300275的博客
06-08 694
关于此属性的基本用法可以参阅offsetleft属性用法详解一章节。此属性具有一定的兼容性问题，那就是在IE7浏览器中，它的返回值是想对于最近的父辈元素的左侧的距离。上面的代码在其他浏览器中返回值是100，但是在IE7浏览器中返回值是50。至于IE6没有测试，感兴趣的大家可以做一下测试。下面抽点空给大家介绍offsetLeft与style.left的区别offsetLeft 获取的是相对于父对象的...
浅析offsetLeft,Left,clientLeft之间的区别
09-04
主要是对offsetLeft,Left,clientLeft之间的区别进行了详细的分析介绍，需要的朋友可以过来参考下想，希望对大家有所帮助
整理js中offset,client,scroll三大家族
weixin_47597807的博客
03-29 142
offset家族： offsetTop:距离第一个有定位的父盒子上边的距离。 同理，offsetLeft就是距离第一个有定位的父盒子左边的距离。 若没有父盒子则以body为准。 与style.left不同： 1、style.left只能获取行内的 2、style.left只能返回带有定位盒子的left，而offsetLeft可以返回没有定位盒子距离左侧的位置 3、offsetLeft是只读的，而style.left是可读写的 同理,offsetTop等也是一样。 offsetHeight:元素本身的高，包括
html中offsetleft属性,JavaScript offsetLeft属性值简介说明
weixin_28769141的博客
06-08 436
摘要:下文讲述dom对象之offsetLeft属性值的功能简介说明,如下所示:DOM之offsetLeft属性值说明DOM之offsetLeft属性值功能说明:offsetLeft属性值用于返回一个DOM元素相对于的”父级定位元素”的左边偏移量(左边的距离(像素))DOM之offsetLeft属性值注意事项:1.此属性是一个只读属性2.当父级元素拥有定位属性时,此时返回最近的一个拥有定位属性的父级...
彻底搞懂 offsetX、scrollX、clientX 的区别
热门推荐
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
js的位置属性，js判断宽高的属性，offsetLeft、scrollWidth，scrollTop、clientWidth等位置属性yong、对比及兼容性（内有图示参考）
weixin_44100002的博客
03-31 540
js判断宽高的属性，offsetLeft、scrollWidth，scrollTop、clientWidth等图片对比及兼容性用法
html中offsetleft属性,JavaScript中style.left与offsetLeft的使用及区别详解
weixin_31516001的博客
06-08 281
JavaScript中style.left与offsetLeft的区别说明如下所示：今天在制作焦点轮播图的时候，遇到一个问题，在使用style.left获取图片的位置时，怎么也获取不到。换用offsetLeft就能够成功获取到了。虽然实现了我想要的效果，但是还是不甘心啊，没有找到原因，心里就是怪怪的，于是我翻开JavaScript高级程序设计，将style.left和offsetLeft有关的知识...
js中offset、client、scroll、screen、page用法
CYL_2021的博客
04-26 1609
一.offset offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度高度） 注意：返回值都不带单位 常用属性： 1.1 offsetX，offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 2.2 offsetWidth，offsetHe
clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
weixin_47970316的博客
04-22 364
clientX,offsetX,pageX,screenX的异同 对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼，首先我们从文字上解释它的异同 首先我们要明确对于浏览器而言，它的X还有Y左边是如何计算的： X坐标是浏览器的可视窗口的左上角为坐标的原点，然后向右手边为X的正坐标，左手为负坐标。 同样的对于Y坐标而言就是以浏览器的可视窗口的左上角为坐标的原点，向下是Y的正坐标，向上是Y的负坐标。 不过对于浏览器的可视窗口而言，不存在所谓的负坐标，因为它的最小值就是(0,0) 一:clientX
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 316
页面： 吸顶方法：
offsetleft和clientx的区别
最新发布
03-16
offsetLeft和clientX是两个不同的属性，它们的含义和用途也不同。 offsetLeft是一个元素相对于其父元素左边缘的偏移量，以像素为单位。它是一个只读属性，可以通过JavaScript代码来获取。例如，如果一个元素的offsetLeft属性值为100，那么它就相对于其父元素左边缘向右偏移了100个像素。 clientX是一个事件属性，它表示鼠标指针相对于浏览器窗口左边缘的水平坐标，以像素为单位。它只有在鼠标事件发生时才有值，可以通过JavaScript代码来获取。例如，如果一个鼠标事件的clientX属性值为200，那么鼠标指针就相对于浏览器窗口左边缘向右偏移了200个像素。 因此，offsetLeft和clientX是两个不同的属性，它们的含义和用途也不同。offsetLeft是用来获取元素相对于其父元素左边缘的偏移量，而clientX是用来获取鼠标指针相对于浏览器窗口左边缘的水平坐标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值