原生 JS 和 jQuery 中的尺寸

jQuery

JS

$(elem).width()

border-box: <code>elem.offsetWidth</code> - padding - border

content-box: <code>elem.offsetWidth</code> - padding

$(elem).innerWidth()

<code>elem.clientWidth</code> + scrollbar

$(elem).outerWidth()

<code>elem.offsetWidth</code>

$(window).width()

<code>document.documentElement.clientWidth</code>

$(window).innerWidth()

$(window).outerWidth()

<code>window.innerWidth</code>

$(document).width()

Math.max(<code>document.body.scrollWidth</code>,

<code>document.documentElement.scrollWidth</code>,

<code>document.body.offsetWidth</code>,

<code>document.documentElement.offsetWidth</code>,

<code>document.documentElement.clientWidth</code>)

$(document).innerWidth()

↵

$(document).outerWidth()

感谢您的阅读，如果您对我的文章感兴趣，可以关注我的博客，我是叙帝利，下篇文章再见！

开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd

基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero

Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions

仿 Windows 照片查看器插件 https://github.com/nzbin/photoviewer

仿 Windows 照片查看器插件 jQuery 版 https://github.com/nzbin/magnify

完美替代 jQuery 的模块化 DOM 库 https://github.com/nzbin/domq

简化类名的轻量级 CSS 框架 https://github.com/nzbin/snack

与任意 UI 框架搭配使用的通用辅助类 https://github.com/nzbin/snack-helper

单元素纯 CSS 加载动画 https://github.com/nzbin/three-dots

有趣的 jQuery 卡片抽奖插件 https://github.com/nzbin/CardShow

悬疑科幻电影推荐 https://github.com/nzbin/movie-gallery

锻炼记忆力的小程序 https://github.com/nzbin/memory-stake