offsetWidth、clientWidth、scrollWidth 的区别

最新推荐文章于 2024-03-29 21:29:37 发布
最新推荐文章于 2024-03-29 21:29:37 发布
阅读量193 收藏
点赞数 1
分类专栏： 笔记 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qhsr9177/article/details/125698478
版权
offsetWidthclientWidthscrollWidth
相同之处都是返回元素大小
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位

主要用法：

  1. offset系列经常用于获得元素位置 offsetleft offsetTop
  2. client经常用于获取元素大小 clientWidth clientHeight
  3. scroll经常用于获取滚动距离 scrolTop scrollLeft

注意页面滚动的距离通过 window . pageYOffset 获得

夕川Z
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
offsetWidth、clientWidth、scrollWidth三大系列总结
qq_44850230的博客
09-03 226
element.offsetWidth : 返回自身包括padding、边框、内容区的宽度，返回数值不带单位 element.clientWidth: 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 element.scrollWidth: 返回自身实际的宽度，不含边框，返回数值不带单位 注： offset系列经常用于获得元素位置 offsetLeft offsetTop client经常用于获取元素大小 clientWidth clientHeight scroll经常用于获取
元素偏移量offset、可视区client、滚动scroll
Komorebi_00的博客
11-17 290
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client的相关属性可以动态的得到该元素的边框大小、元素大小等。offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。因此，我们想要获取元素大小位置，用offset更合适，想要给元素更改值，则需要用style改变。
scrollWidth,clientWidth,offsetWidth的区别，2024最新秋招前端岗面试清单
最新发布
2401_83977554的博客
03-29 276
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】，祝你转行成功。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Client系列
weixin_69317131的博客
05-04 143
client系列属性 作用
对于offsetWidth，clientWidth，scrollWidth和-Height的了解
weixin_44471727的博客
05-17 185
CSS盒子模型相当复杂，尤其是在滚动内容时。虽然浏览器使用CSS中的值来绘制一个盒子，但是如果只使用CSS，没有与JS配合使用的话是远远不够的。 因此，为方便起见，每个元素都具有六个DOM属性：offsetWidth，offsetHeight，clientWidth，clientHeight，scrollWidth和scrollHeight。这些是代表当前视觉布局的只读属性，并且它们都是整数（因此可能会产生四舍五入的误差）。 让我们了解一下它们的区别： offsetWidth，offsetHeight：包含
offsetWidth,offsetHight包括边框，clientWidth,clientHight不包括边框（但包括padding）/page-- 模态框拖拽案例----京东淘宝放大镜的案例
南下有你
02-20 533
1.获取鼠标在盒子内的标签- index.html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ ...
scrollWidth,clientWidth与offsetWidth的区别
10-30
scrollWidth,clientWidth与offsetWidth的区别
scrollWidth,clientWidth,offsetWidth的区别
09-03
主要介绍了scrollWidth,clientWidth,offsetWidth的区别,需要的朋友可以参考下
offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
09-22
图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性，对于一些页面的控制很有帮助。
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
10-29
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
你必须知道的 clientWidth, offsetWidth, scrollWidth.
fang_my的博客
02-12 3914
这三个属性所对应的和都是同样的道理，在这里就不重复赘述了，希望读者可以自己举一反三自行推导这三个属性代表什么意思。从学习这几个属性的过程中才真正体会到：“看一千遍文档，不如自己动手实践一遍”的道理。还希望大家也可以跟着自己敲一敲，真的不难。与君共勉才是我写这篇文章的初衷～
client属性（返回元素大小，与offset相比不包含边框，也没单位）
weixin_48340600的博客
09-27 261
JavaScript提高班笔记(四)
Augenstern_QXL的博客
04-19 882
1.offset – 元素偏移量offset： offset翻译过来就是偏移量 我们使用offect 系列相关属性可以动态的得到该元素的位置(偏移)，大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意： 返回的数值都不带单位 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移 elemen
详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth
qq_47443027的博客
11-25 3219
3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）
【CSS】【面试题】牛客网CSS专项练习部分答案及解析（更新中...）
weixin_39006917的博客
03-01 6311
1.在W3C标准盒模型中，默认情况下块元素的总宽度为： content content+2*padding content+2*padding+2*border content+2*padding+2*border+2*margin 答案为：content 解析：CSS有两种盒子模型，分别为W3C盒子模型和IE盒子模型。区别在于，IE盒子模型的content部分，将border和padding包含进去了。width = border+padding+content。题干问的总宽度应该理解为width值为
offsetWidth、clientWidth、scrollTop的区别？
06-09
offsetWidth是一个元素的完整宽度，包括border、padding和元素的width。 clientWidth是指元素的可视宽度，即不包括元素的border和滚动条的宽度，但包括padding。 scrollTop是指元素的滚动条在垂直方向上滚动的距离...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值