原生 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