屏幕可視區(qū)域的width與height
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
屏幕總高度
height= document.documentElement.scrollHeight;
當(dāng)前元素名稱(chēng)為oCurrent；
當(dāng)前元素的父元素名稱(chēng)為oParent；
當(dāng)前元素的的其它兄弟元素oBrother;
的用 .號(hào)代替
padding-left pl 代替
padding-right pr 代替
padding-top pt 代替
padding-bottom pb 代替
margin-left ml 代替
margin-right mr 代替
margin-top mt 代替
margin-bottom mb 代替
文章中實(shí)測(cè)數(shù)據(jù)與文章示例所使用的當(dāng)前版本瀏覽器為準(zhǔn)。
<style type="text/css">
body {
height: 2000px;
margin: 10px;
padding: 100px;
border: 30px solid #999;
background: #ddd;
}
#current {
width: 400px;
height: 200px;
margin: 10px;
padding: 20px;
border: 30px solid lemonchiffon;
background: lightcoral;
}
#parent {
width: 800px;
height: 300px;
margin: 10px;
padding: 50px;
background: lightsteelblue;
border: 30px solid lightseagreen;
}
</style>
<div id="parent">
<div id="current"></div>
</div>
offset系列
1. offsetLeft、offsetTop
-
ie6 ~ ie7
一. oCurrent = 無(wú)定位 ，oParent = 無(wú)定位 ||position: relative、 absolute;
二. oCurrent = position: relative; ，oParent = position: relative、 absolute;oCurrent.offsetLeft = oParent.pl + oBrother.offsetWidth + oCurrent.ml; 60 = 50 + 0 + 10; oCurrent.offsetTop = oParent.pt + oBrother.offsetHeight ; 50 = 50 + 0 ; 注意：在計(jì)算 oCurrent.offsetTop 時(shí)，oCurrent.mt 是失效的.
三. oCurrent = position: absolute ，oParent = position: relative、absolute;
oCurrent.offsetLeft = oParent.pl + oBrother.offsetWidth + oCurrent.ml;
60 = 50 + 0 + 10;
oCurrent.offsetTop = oParent.pt + oBrother.offsetHeight + oCurrent.mt;
60 = 50 + 0+ 10 ;
注意：oCurrent.mt 生效的.
四. oCurrent = position: relative、absolute ，oParent = 無(wú)定位；
oCurrent.offsetLeft = body.ml + body.bl + body.pl + oParent.ml + oParent.bl + oParent.pl + oBrother.ml + oBrother.offsetWidth +oBrother.mr + oCurrent.ml ;
240 = 10 + 30 + 100 + 10 + 30 + 50 +0 + 0 + 0 + 10;
oCurrent.offsetTop = body.mt + body.bt + body.pt + oParent.bt + oParent.pt + oBrother.offsetHeight + oCurrent.mt ;
220 = 10 + 30 + 100 + 30 + 50 + 0 ;
注意：oParent.mt 、oBrother.mt 無(wú)效的 .
ie7 當(dāng) oBrother 出現(xiàn) 則 oCurrent.mt 有效
ie6 當(dāng) oBrother 出現(xiàn) 則 oBrother.mb 有效
各瀏覽器一致
clientWidth-可視區(qū)寬
**(padding-left)+(width)+(padding-right)-滾動(dòng)條寬度(17px) **
clientHeight-可視區(qū)高
(padding-top)+(height)+(padding-bottom)-滾動(dòng)條寬度(17px)
在沒(méi)有內(nèi)邊距和滾動(dòng)條，沒(méi)有設(shè)置css寬高；
那么ie6，ie7 瀏覽器會(huì)理解為clientWidth：0，clientHeight：0；
ie8+ clientWidth：寬度，clientHeight：0；
offsetWidth-占位寬
*(border-width)2+clientWidth(滾動(dòng)條寬度默認(rèn)算在內(nèi)) **
offsetHeight-占位高
*(border-width)2+clientHeight(滾動(dòng)條寬度默認(rèn)算在內(nèi)) **
參考
http://caibaojian.com/js-name.html
http://blog.csdn.net/inuyasha1121/article/details/49149725
