js中off和client以及scroll的高度宽度问题

最新推荐文章于 2024-07-29 11:24:58 发布
原创 最新推荐文章于 2024-07-29 11:24:58 发布 · 492 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细解释了offsetWidth/offsetHeight、clientWidth/clientHeight以及scrollWidth/scrollHeight等元素尺寸属性的区别。offsetWidth/offsetHeight包括内容、内边距及边框；clientWidth/clientHeight则不包括滚动条；而scrollWidth/scrollHeight还包含了溢出的内容尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1755
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
qq_29738977的博客
01-29 1890
offsetWidth/offsetHeight返回值包含content + padding + border ，如果有滚动条，也不包含滚动条 clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条 scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸 &lt;!...
offsetWidth / offsetHeight、clientWidth / clientHeight与 scrollWidth / scrollHeight的区别
笑望灬星辰
04-18 330
offsetWidth、offsetHeight、clientWidth、clientHeight与 scrollWidth、scrollHeight的区别 offsetWidth / offsetHeight 返回值包含content + padding + border，效果与 e.getBoundingClientRect()相同 clientWidth / clientHeight 返回值只包含content + padding，如果有滚动条，也不包含滚动条 scrollWidth / scro
JavaScript和jQuery的概述《干货》
2301_79258776的博客
04-23 1421
学会javaScript和jQuery的灵活运用！
移动端js调取手机相册和拍照功能
weixin_30593261的博客
06-21 1599
前端可以通过js调取手机的相册和拍照功能，但不能拍视频！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-sc...
【国产开源可视化引擎】Meta2d.js API-Core
最新发布
le5le_iot的博客
07-29 762
【国产开源可视化引擎】Meta2d.js API-Core
javascript笔记
Nie_XiaoGang的博客
12-11 2174
javascript笔记
offsetWidth、offsetHeight、clientHeight、clientWidth、scrollHeight、scrollWidth详细对比
csx blog
12-08 647
offsetHeight、offsetWidth其实就是元素在屏幕上所占的实际宽高（包括border、padding）时时clientHeight、clientWidth是 padding+conent-滚动条宽度，就拿上述例子来说clientHeight = padding + conent - 滚动条宽度时content高度就是我们设置的宽高，都是10093时，content高度是我们设置的宽高 - padding - border = 100 - 10 - 2 = 88。
offsetWidth/offsetHeight，clientWidth/clientHeight与scrollWidth/scrollHeight的区别？
m0_71955188的博客
09-18 323
offsetWidth和offsetHeight： offsetWidth获取元素的宽度，包括元素的边框、内边距和垂直滚动条（如果存在）的宽度。 offsetHeight：获取元素的高度，包括元素的变宽、内边距和水平滚动条（如果存在）的高度。 clientWidth和clientHeight： clientWidth获取元素的可视区域宽度，不包括边框和滚动条的宽度。他表示元素内部可以显示内容的宽度。 clientHeight 获取元素的可视区域高度，不包括边框和滚动条的高度。他表示元素内部可以显示内容的高度
clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
weixin_30794499的博客
02-10 327
clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight是几个困惑了好久的元素属性，趁着有时间整理一下 1. clientWidth 和 clientHeight 网页中的每个元素都具有clientWidth 和 clientHeight 属性，表示可视区域的宽高，即元素内容加上padd...
JS中offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight的区别
qq_43447509的博客
04-18 265
offsetWidth//返回元素的宽度(包括元素宽度，内边距和边框 不包括外边距) offsetHeight//返回元素的高度(包括元素高度，内边距和边框 不包括外边距) clientWidth//返回元素的宽度(包括元素宽度，内边距 不包括边框和外边距) clientHeight//返回元素的高度(包括高度，内边距 不包括边框和外边距) scrollWidth//返回元素的宽度(包括元素宽度，...
区分概念：clientWidth/clientHeight/offsetWidth/offsetHeight/scrollLeft/scrollTop/scrollHeight/scrollWidth...
weixin_30951743的博客
02-28 130
1、 offsetWidth offsetHeight 　　元素在页面中可视部分的宽度和高度总计（margin除外）。 　　若CSS中没有指定元素的高度和宽度(即自适应)，所有浏览器都会显示实际的值包括width + padding + border（注意：不包含margin;滚动条是包含在内容width里面的。） 2、 scrollTop 和 scrollLeft 　　scrollTop...
JS中offsetHeight/offsetWidth,clientHeight/clientWidth,scrollHeight/scrollWidth详解
weixin_33814685的博客
01-12 184
部分内容转载自http://www.jb51.net/article/43470.htm及http://www.cnblogs.com/yuteng/articles/1894578.htmlclientHeight大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域...
CSS专题（二）：元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s...
dazhatan9812的博客
08-02 417
　　这是一些极易混淆的概念。仔细分析，这些值都是用来对元素进行定位的，下面逐一介绍。本文只介绍width,left等值，与其对应的是 height,top。本文还只介绍在Firefox下的表现，我认为，先不要考虑在IE各版本，Chrome等浏览器下的表现，这样一来，问题就单纯 了，容易理解。 一 宽度的基础 　　何为宽度，在CSS中，width属性指元素内容区的 宽度，并不是元素在页...
clientWidth clientHeight offsetWidth offsetHeight scrollWidth scrollHeight offsetLeft offsetTop
蒲公英芽的博客
01-05 702
clientWidth、clientHeight，指元素的width+padding-滚动条的宽度和高度 来一张图说明一下： body的clientWidth为body的width+padding body的clientHeight是内容高度，如果没有内容，高度为0 html的clientWidth为浏览器窗口的宽度，不包括滚动的宽度 html的clientHeight为浏览器窗口的高度，不包...
深入浅出JavaScript: offset, client, scroll家族详解
client家族也是JavaScript中的一个重要对象，主要包括clientWidth、clientHeight、clientLeft、clientTop等属性，这些属性用于获取元素的内部尺寸以及内边距等信息。clientWidth和clientHeight用于获取元素的内部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值