style.left,offsetLeft,clientLeft,scrollLeft的区别

最新推荐文章于 2022-09-09 16:55:42 发布

dejing9744

最新推荐文章于 2022-09-09 16:55:42 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/byronvis/p/4807831.html

版权

style.left,offsetLeft,clientLeft,scrollLeft中只有style.left,scrollLeft是可读写，其它都只是可读。

其中style.left，offsetLeft是差不多的，left的值带单位而offsetLeft不带单位。这两个属性都必须在position属性为absolute或relative时才有意义。

left：　　获取或设置相对于父元素或者自身的位置

offsetLeft:　　获取相对于offsetParent（父元素）的位置

clientLeft:　　获取元素border宽度
scrollLeft:　　获取或设置元素当前水平滚动的位置

转载于:https://www.cnblogs.com/byronvis/p/4807831.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dejing9744

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

js中的scrollleft、style.left、clientLeft、offsetLeft

敲代码不爱找bug的妹子

08-21

7401

相信大家都见过这张图，乍一看，这张图乱七八糟的，看见就很头疼，但是为了搞清楚这几个left到底什么是什么，只能硬着头皮慢慢分析了~其实，仔细看看，这张图差不多就分为五大部分。盒模型的组成部分，padding、margin、border和content，这个我们就不做解释啦。。 style部分。这个在position定位中经常用到。 scroll部分。 client部分。 offset部分。现在，

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

IT之旅的博客

06-05

1687

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

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

style.left,offsetLeft,scrollLeft和clientLeft之间的区别（未完待续）

Sux

04-28

1237

首先需要特别注意：一个对象的style.left的值是带单位“px”的，因此在获取到该值以后不能直接与数字(ˇˍˇ）想相加减（我曾为此付出一个下午的时间来研究，最后当发现错误是这个的时候，差点没昏过去！！！）。

关于scrollLeft的赋值问题

fyzhu01的专栏

08-26

8855

scrollTop和scrollLeft属性只有当他内部元素超出父级元素的时候才有效，否则将一直为0，貌似设置了也没用。

style.left,style.width与offsetLeft,offsetWidth、scrollLeft，scrollWidth的区别

mr_fzz的博客

11-04

1925

1.offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置.offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。2.style.left必须是节点设置了position属性 style.left、style.width等属性通过

style.left和offsetLeft和offsetWidth和scrollTop区别

yhy_的博客

12-08

256

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

style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth

weixin_30908941的博客

03-08

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax</title><style type="text/css"> *{ margin: 0; padding: 0; } #div1{ w...

offsetLeft、clientLeft、scrollLeft的区别及使用场景

web15910813117的博客

09-09

245

document.documentElement.scrollTop 在safari不管用0,现在试支持了。document.body.scrollTop 在safari管用，其他浏览器不管用。无滚动条时，scrollHeight和clientHeight一样。scrollTop、scrollLeft 可读写。元素的width+padding。

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

09-04

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

Js中_关于top、clientTop、scrollTop、offsetTop

08-18

style.top 和 style.left 是两个相关的属性，它们返回元素的样式中的 top 和 left 属性值。style.top 返回元素的上边缘距离，而 style.left 返回元素的左边缘距离。例如，在 HTML 中，我们有一个 div 元素： ```...

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

小苏(º﹃º )的博客

07-13

2731

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

13.怎么理解回流跟重绘？什么场景下会触发？

kleinBlue.的博客

11-07

308

一、是什么在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制具体的浏览器解析渲染机制如下所示：解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Lay..

weixin121作品集展示微信小程序+ssm.rar

09-13

所有源码，都可正常运行

weixin090体育资讯软件的实现+ssm.rar

09-13

所有源码，都是可以运行起来的

基于java的财务管理系统设计与实现.docx

09-13

基于java的财务管理系统设计与实现.docx

吕嘉诚_训练班表.pdf