js中元素的各种宽高图文详解

php是最好的语言

发布时间：2018-08-10 09:36:11

2467人浏览过

来源于php中文网

原创

主要看这张图，感觉图的意思很清晰了

1.与client相关的宽高

clientWidth/clientHeight——元素的可视部分的宽度和高度，即padding+content，如果出现滚动条，则要减去相应滚动条的宽度。

无padding无滚动条：clientWidth = style.width
有padding无滚动条：clientWidth = style.width+style.padding*2
有padding有滚动条，且滚动条是显示的：clientWidth = style.width+style.padding*2-滚动轴宽度
clientLeft/clientTop——元素周围边框的厚度，如果不指定一个边框或者不定位该元素，其值为0。
clientLeft = border-left的border-width
clientTop = border-top的border-width

2.与offset相关的宽高

offsetWidth/offsetHeight——border+padding+content。该属性和其内部的内容是否超出元素大小无关，只和本来设定的border及width和height有关。

无padding无滚动条无border：offsetWidth = clientWidth = style.width
有padding无滚动条有border：offsetWidth = style.width+style.padding*2+border宽度*2 = clientWidth+border宽度*2
有padding有滚动条，且滚动条是显示的，有border：offsetWidth = style.width + style.padding * 2 + border宽度 * 2 = clientWidth + 滚动轴宽度 + border宽度*2
offsetLeft/offsetTop——与offsetParent有关，而且存在兼容
如果当前元素的父级元素没有进行css定位(position为absolute或relative)，offsetParent为body；如果当前元素的父级元素中有css定位(position为absolute或relative)，offsetParent取最近的那个父级元素。

奥硕企业网站管理系统1.9 Sql版
临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能。奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图，可以自由设置宽高5、图

下载
IE6/7：offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)；
IE8/9/10及Chrome中：offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)；
FireFox中：offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)；

3.与scroll相关的宽高——scrollWidth/scrollHeight——document.body的scrollWidth和scrollHeight与p的scrollWidth和scrollHeight是有区别的

body的scrollWidth和scrollHeight

给定body宽高小于浏览器窗口：scrollWidth通常是浏览器窗口的宽度；scrollHeight通常是浏览器窗口的高度。
给定body宽高大于浏览器窗口，且内容小于给定宽高：scrollWidth=给定的宽度 + padding + margin + border； scrollHeight = 给定的高度+padding+margin+border。
给定body宽高大于浏览器窗口，且内容大于给定宽高：scrollWidth=内容宽度 + padding + margin + border； scrollHeight = 内容高度+padding+margin+border
p的scrollWidth和scrollHeight（火狐会把body当作p来处理）
无滚动轴时：scrollWidth=clientWidth=style.width+style.padding*2。
有滚动轴时：scrollWidth=实际内容的宽度 + padding*2； scrollHeight = 实际内容的高度+padding*2。
scrollLeft/scrollTop——可读写，卷起的高度

相关专题

chrome什么意思

chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。

1057

2023.08.11

chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

837

2023.11.06

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

530

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

760

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

6178

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

492

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

221

2023.09.04

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

热门下载

网站特效

网站源码

网站素材

前端模板