為什么80%的碼農都做不了架構師？>>> ??

一、window對象表示瀏覽器中打開的窗口
二、window對象可以省略

一、document對象是window對象的一部分
二、瀏覽器的HTML文檔成為Document對象

window.location和document.location
window對象的location屬性引用的是Location對象
表示該窗口中當前顯示文檔的URL.
document的對象的location屬性也是引用了Location對象
window.location===document.location //true

javascript的高寬
window.innerWidth
window.innerHeight
window.outerWidth
window.outerHeight

window.screen.height
window.screen.width
widow.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.cilentTop

假如無padding無滾動
clientWeigth=style.width

假如有padding無滾動
clientWidth=style.width+style.padding*2

假如有padding有滾動，且滾動是顯示的
clientWidth=style.width+style.padding*2-滾動軸寬度

clientTop=border-top的border-width
clientLeft=border-left的boder-width

document.body.offsetWidth
document.body.offsetHeight
document.body.offsetLeft
document.body.offsetTop

假如無padding無border
offsetWidth=clientWeigth=style.width

假如有padding無border
offsetWidth=style.width+style.padding*2+（border-width）2
offsetWidth=clientWidth+border寬度2

假如有padding有滾動，且滾動是顯示的，有border
offsetWidth=style.width+style.padding2+（border-width）2
offsetWidth=clientWidth+style.padding2+滾動軸寬度+border寬度2

在IE6/7中
offsetLeft=（offsetParent的padding-left）+（當前元素的margin-left）

在IE8/8/10/及Chorme中
offsetLeft=（offsetParent的margin-left）+（offsetParent的border的寬度）+（offsetParent的padding-left）+（當前元素的margin-left）

在FirFox中
offsetLeft=（offsetParent的margin-left）+（當前元素的margin-left）+（offsetParent的padding-left）

無滾動軸時：
scrollWidth==cilentWidth=style.width+style.padding*2

有滾動軸時：
scrollWidth==是實際內容的寬度+padding2
scrollHeight==是實際內容的高度+padding2

clientX和clientY 相對于瀏覽器（可視區左上角0，0）的坐標
screenX和screenY 相對于設備屏幕左上角（0，0）的坐標
offsetX和offsetY 相對于事件源左上角（0，0）的坐標
pageX和pageY 相對于整個網頁左上角（0，0）的坐標
X和Y 本來是IE屬性，相對于用css動態定位的最內層包容元素

jquery高寬
.width()
.height()
.innerWidth()
.innerHeight()
.outerWidth()
.outerHeight()

.width() window document 傳值無效
普通元素 width（value） width（function(){}）
.width()與.css("width")區別
width()返回結果無單位
css("width")的結果有單位

.innerWidth() window document 傳值無效 不推薦
普通元素.innerWidth（value） .innerWidth（function(){}）
.outerWidth和innerWidth 以上同理。

.scrollLeft() .scrollTop() .offset() .position()
scrollLeft(): 相對于水平滾動條左邊的距離
如果滾動條非常左、右或者元素不能被滾動，那么這個值為0，0
scrollTop(): 相當上、下或者元素不能被滾動，那么這個值為0，0
offset(): 相對于document的當前坐標值（相對于body左上角的left，top的值）
.position(): 相對于offset parent的當前坐標值（相對于offset parent元素左上角的left、top的值）

轉載于:https://my.oschina.net/sycbbb/blog/796523

總結

以上是生活随笔為你收集整理的javascript/jquery高度宽度详情解说分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。