jquery and js

標籤：引用   cti   outer   padding   無效   window   單位   相對   區別   

一、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.padding2+（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/home

jquery and js