屏幕可视区域的width与height
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
屏幕总高度
height= document.documentElement.scrollHeight;
当前元素名称为oCurrent；
当前元素的父元素名称为oParent；
当前元素的的其它兄弟元素oBrother;
的用 .号代替
padding-left pl 代替
padding-right pr 代替
padding-top pt 代替
padding-bottom pb 代替
margin-left ml 代替
margin-right mr 代替
margin-top mt 代替
margin-bottom mb 代替
文章中实测数据与文章示例所使用的当前版本浏览器为准。
<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 = 无定位 ，oParent = 无定位 ||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 ; 注意：在计算 oCurrent.offsetTop 时，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 = 无定位；
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 无效的 .
ie7 当 oBrother 出现 则 oCurrent.mt 有效
ie6 当 oBrother 出现 则 oBrother.mb 有效
各浏览器一致
clientWidth-可视区宽
**(padding-left)+(width)+(padding-right)-滚动条宽度(17px) **
clientHeight-可视区高
(padding-top)+(height)+(padding-bottom)-滚动条宽度(17px)
在没有内边距和滚动条，没有设置css宽高；
那么ie6，ie7 浏览器会理解为clientWidth：0，clientHeight：0；
ie8+ clientWidth：宽度，clientHeight：0；
offsetWidth-占位宽
*(border-width)2+clientWidth(滚动条宽度默认算在内) **
offsetHeight-占位高
*(border-width)2+clientHeight(滚动条宽度默认算在内) **
参考
http://caibaojian.com/js-name.html
http://blog.csdn.net/inuyasha1121/article/details/49149725
