开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >原生 JS 和 jQuery 中的尺寸

原生 JS 和 jQuery 中的尺寸

叙帝利

发布于 2021-08-06 02:28:17

发布于 2021-08-06 02:28:17

2.4K0

举报

文章被收录于专栏：前端新视界前端新视界

element

jQuery	JS
$(elem).width()	border-box: elem.offsetWidth - padding - border content-box: elem.offsetWidth - padding
$(elem).innerWidth()	elem.clientWidth + scrollbar
$(elem).outerWidth()	elem.offsetWidth

window

jQuery	JS
$(window).width()	document.documentElement.clientWidth
$(window).innerWidth()	document.documentElement.clientWidth
$(window).outerWidth()	window.innerWidth

document

jQuery	JS
$(document).width()	Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth)
$(document).innerWidth()	↵
$(document).outerWidth()	↵

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-07-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

整理获取 viewport 和 element 尺寸和位置方法

返回整个页面的滚动的位置，pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8

JS菌

2019/04/23

1.4K0

整理获取 viewport 和 element 尺寸和位置方法

【前端】：client、offset、scroll

Get the current computed width for the first element in the set of matched elements.

WEBJ2EE

2020/01/17

1K0

【前端】：client、offset、scroll

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊

全栈程序员站长

2022/09/16

7.7K0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

JavaScript基础学习--零碎

1、如果WINDOW对象是常规HTML页面，TOP就是SELF var top = document.getElementById('top'); top.innerHTML

用户1148399

2018/01/09

1.1K0

clientWidth、offsetWidth等介绍[通俗易懂]

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

全栈程序员站长

2022/09/16

6500

JavaScript学习笔记011-DOM页面元素的运用

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终给大家分享一个工作中遇到的事情：分公司人事部的电脑坏了老总叫我们网络营销部去给分公司送电脑去了安装好电脑后他们说打印机坏了让我们修我们看了一下不是连接问题好像是打印机老化，硬件问题于是跟老总说，叫个电脑维修的过来看看吧老总表现的很不满意，说你们要多学点东西，身为网络部的，连打印机都不会修后来在一次员工会议上，老总又提到这件事，他说分公司很多人对网络部不满意，觉得你们做事不靠谱，

Mr. 柳上原

2018/09/05

5100

DOM盒子模型常用属性client，offset和scroll

[获取元素具体的某个样式值] 1.[元素].style.xxx 操作获取只能获取所有写在元素行内上的样式(不写在行内上,不管你写没写都获取不到,真实项目中我们很少会把样式写在行内上),outer.style.width =>'' (width是写在样式表中的) 2.获取当前元素所有经过浏览器计算的样式经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的不管当前样式写在哪,不管你是否写了(浏览器会给元素设置一些默认样式) 标准浏览器(IE9+) window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象) IE6~8 [元素].currentStyle 获取经过计算的样式

TimothyJia

2019/11/12

1.4K0

DOM盒子模型常用属性client，offset和scroll

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

https java 网络安全

关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清，这里就来总结一下这些方法的用法和含义。

全栈程序员站长

2022/09/16

9670

实现完整网页保存为图片的方法

php javascript python java selenium

业务场景中，会存在某些场景需要将网页内容快照保存下来的场景。因为有些网页内容是联网异步获取的，所以爬虫保存html页面的方式无法保证后续数据与此前的一致性，因此将网页内容以图片保存下来，是一种简单而直接的思路。本文档即针对上述诉求的技术可行性进行论证，并给出可行的技术实现手段。

是Vzn呀

2022/07/14

3.1K0

JS-JavaScript学习笔记（一）[通俗易懂]

php java node.js javascript 编程算法

1.文档的输出：document.write() 可输出字符，表达式，html标签。函数

全栈程序员站长

2022/07/07

3360

JS-JavaScript学习笔记（一）[通俗易懂]

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高： window.screen.availHeight window.screen.availWidth 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网

Sindsun

2018/04/28

3.6K0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

html javascript

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE，FireFox 差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

山河木马

2019/03/05

16.4K0

jQuery源码解析之width()

一、在讲之前，先弄清 boxSizing 属性（1）box-sizing 是默认值 "content-box"

进击的小进进

2022/03/28

3.2K0

jQuery源码解析之width()

第51天：封装可视区域大小函数client

offsetWidth: width + padding + border （披着羊皮的狼）

半指温柔乐

2018/09/11

5620

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

腾讯云测试服务

一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrollWidth

TimothyJia

2019/11/12

2.4K0

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js获取各种距离和宽高

width window 对象计算机浏览器

y191024

2024/01/30

3220

【HTML代码】在HTML加入图片飘窗的代码[汇总]

function math var html document

DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法，dede网站二开，以下龙腾飞网络科技-小吴在建站实操中笔记记录，织梦dede建站教程保存使用非常方便：

攻城狮与产品喵

2025/03/13

1730

【HTML代码】在HTML加入图片飘窗的代码[汇总]

js、jQuery 获取文档、窗口、元素的各种值

jquery java 人工智能

浏览器当前窗口文档body的宽度： document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度： document.body.clientHeight;(仅仅是body的height)

Krry

2018/09/10

14.5K0

详解各种获取元素宽高及位置的属性

offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offset

laixiangran

2018/04/24

4.1K0

详解各种获取元素宽高及位置的属性

第76天：jQuery中的宽高

2、window对象可以省略，比如alert()也可以写成window.alert()

半指温柔乐

2018/09/11

6580

相关推荐

整理获取 viewport 和 element 尺寸和位置方法

更多 >

LV.0

人人网前端开发工程师

作者相关精选

目录

element

window

document

加入讨论

的问答专区 >

1高级后端开发工程师擅长3个领域

相关课程

一站式学习中心 >

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

云原生数据库TDSQL-C学习路径课

云原生数据库 TDSQL-C

云原生降本增效实战营