javascript/jquery高度寬度詳情解說分析

1、window對象表示瀏覽器中打開的窗口
2、window對象能夠省略

1、document對象是window對象的一部分
2、瀏覽器的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的值）