offsetLeft 、offsetWidth、scrollHeight等的区别

最新推荐文章于 2023-12-22 16:28:01 发布

weixin_30483697

最新推荐文章于 2023-12-22 16:28:01 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/lemonlee/p/9521793.html

版权

一、offsetLeft/offsetTop

offsetLeft：元素最左边离最近的有定位的父级之间的距离，不带单位。

offsetTop：元素最上边离最近的有定位的父级之间的距离，不带单位。

上图中，给box1设置了定位，box2设置了一个margin-left:10px

box2.offsetLeft=10

二、offsetWidth/offsetHeight

offsetWidth：元素的宽度，包含边框，不带单位

offsetHeight：元素的高度，包含边框，不带单位

box1.offsetWidth=120

box2.offsetwidth=60

三、clientWidth/clientHeight

clientWidth：元素的宽度，不包含边框，不带单位

clientHeight：元素的高度，不包含边框，不带单位

box1.clientWidth=100

box2.clientHeight=50

转载于:https://www.cnblogs.com/lemonlee/p/9521793.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30483697

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）

小苏(º﹃º )的博客

07-13

2757

offsetWidth：元素的布局宽度。 offsetHeight：元素的布局高度。 offsetWidth、offsetHeight 的计算：width/height + padding + border-width，受 box-sizing 影响。 https://juejin.cn/post/6888911624871084046 https://juejin.cn/post/6844903586204221447 ...

Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft

IT之旅的博客

06-05

1716

Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft 一、写作缘由：我想，这绝对是一次意外，对，如此的意外，让我莫名其妙的写下了这篇博文写下这个原因是我在做滚动文字(图片)的时候遇见了些困难，而不巧的是，就...

参与评论您还未登录，请先登录后发表或查看评论

offsetWidth与offsetLeft

willard_cui的博客

08-16

7万+

1、offsetWidth: 为元素的width+元素的padding+边框的宽度如图： 2、offsetLeft、offsetTop、offsetRight、offsetBottom 以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：（测试所用的浏览...

left、offsetLeft、width、offsetWidth区别

ForMyQianDuan的博客

11-06

517

目测： 1、offsetLeft包括的自身的margin值。offsetLeft值，比style.left多出一个margin值。 2、 style.left和style.width值都需要先定义，而且必须要内联在html里，如果定义在css里，则style.left取到的值为空。而offsetLeft则可以取到，无需事先定义div的位置。 3、offsetWidth比style.w

offsetX,offsetLeft,offsetWidth的区别详解

eleanor_wong的博客

05-25

4202

offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发） .big{ width: 200px; height: 200px; border: 1px solid red; position: abso...

offsetWidth、offsetLeft、 clientWidth的区别

weixin_44932552的博客

05-14

975

元素视图属性: 元素属性通过 elem.属性方式使用 clientWidth 水平方向 width + 左右padding clientHeight 垂直方向 height + 上下padding offsetWidth 水平方向 width + 左右padding + 左右border-width offsetHeight 垂直方向 height + 上下padding + 上下border-width 1.offsetWidth属性可以返回对象的padding+border+width属性值之和，st

offsetheight和clientheight和scrollheight的区别以及offsetwidth和clientwidth和scrollwidth的区别...

12-15

285

1.offsetwidth和clientwidth和scrollwidth的区别这里的内容区就是箭头所指的这么多的宽度和高度即可视内容区（因为存在滚动条，下面还有内容）。 offsetwidth:内容区+padding+滚动条+border； clientwidth:内容区（可视内容区）+padding； scrollwidth：内容区+padding； 1....

浅析offsetLeft,Left,clientLeft之间的区别

09-04

在JavaScript和Web开发中，了解DOM元素的定位属性至关重要，特别是`offsetLeft`, `left`, 和`clientLeft`之间的区别。这些属性可以帮助开发者精确地控制和计算元素在页面上的位置和大小。首先，`offsetLeft`是元素...

js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

10-28

在JavaScript中，处理页面元素的位置和尺寸时，经常会用到几个关键属性，如`scrollHeight`、`scrollWidth`、`scrollLeft`和`scrollTop`。这些属性在不同的场景下有着各自独特的用途，理解它们之间的差异是进行网页...

javascript中offsetTop、offsetLeft、offsetWidth、offsetHeight以及scrollTop,scrollLeft详解

美丽的大黄人

06-30

485

javascript中offsetTop、offsetLeft、offsetWidth、offsetHeight以及scrollTop,scrollLeft详解 ①offsetWidth：元素在水平方向上占据的大小，无单位 &nbsp; offsetWidth = border &nbsp;+ 元素内容宽度 + padding ②offsetHeight：元素在垂直方向上占据...

蒙了吗？offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX

weixin_34117211的博客

04-01

1、offsetHeight || offsetWidth = boder + padding + content两者都是只读属性，如果想offsetLeft offsetTop 一般是相对于offsetParent计算的，也就是第一个定位的父级两者都是只读属性offsetTop 与 style.top 的差别我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位，st...

offsetWidth&offsetLeft详解

LynnWonder

08-30

2294

今天手写方格移动的时候遇到了一点问题，主要是针对el.style.left和el.offsetLeft无法区分，其实这个问题一直以来没有具体总结过，只在我的学习笔记(7)里面进行过一次不完全的概述，这次rearrange一下 offsetWidth&offsetLeft详解文章目录offsetWidth&offsetLeft详解快捷位置和尺寸offsetWidth，clien...

一文读懂offsetHeight/offsetLeft/offsetTop/offsetWidth/offsetParent

热门推荐

xuantian868的专栏

10-21

9万+

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度o

style.left 与offsetLeft，style.width和offsetWidth的之间区别

Freedom的blog

07-10

766

1. style.left 与offsetLeft之间的区别　　offsetLeft 获取的是相对于父对象的左边距marginleft，left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的...

完美理解csss中offsetLeft，offsetWidth，scrollLeft区别。

csdn问鼎

10-19

1684

本节内容旨在理解上述词的区别。先来代码再分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ margin-left: 30px; }

offsetWidth、offsetHeight、offsetLeft、offsetTop以及scrollTop,scrollLeft的个人理解

Fiona_lms的博客

10-25

1万+

offsetWidth、offsetHeight、offsetLeft、offsetTop以及scrollTop,scrollLeft

彻底搞懂 offsetX、scrollX、clientX 的区别

lefex的博客

03-05

1万+

无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...

记录一下pageX，offsetX，clientX，offsetLeft，offsetWidth，pageYoffset，scrollTop,scrollY，等。原文摘自MDN文档库。保证正确。

qq_42780323的博客

11-04

1489

这几个属性其实都好理解，但是太多了很容易忘记又记混了。所以从MDN里面摘抄一下。保证记住。目录 1.MouseEvent.pageX 2.MouseEvent.offsetX 3.MouseEvent.clientX 4.HTMLElement.offsetLeft 5.Element.getBoundingClientRect() 6.Element.clientWidth 7.Element.scrollTop 8.Window.scrollY 9.Window.pageYOffs

详解滚动位置与元素尺寸：scrollLeft, scrollTop等属性

- `document.body.scrollWidth`和`document.body.scrollHeight`则分别代表网页正文内容的总宽度和高度，允许用户通过滚动查看全部内容。 2. **滚动位置**： - `document.body.scrollTop`和`document.body....