与对象定位的相关属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin:100px;padding:0;background:#000;position:relative;width:1000px;padding:100px;height:1000px;border:solid 50px #0f0;">
<div id="container" style="width:300px;height:100px;background:#00f;top:0;border:10px solid #f00;padding:20px;margin:100px;position:absolute;left:200px;overflow:scroll;">
   <div style="padding:0;margin:0;left:0;top:0;positon:static;width:500px;height:500px;overflow:hidden;"> width:300px;height:100px;dffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    asdfljasldfkja
    asdlfjasdlfjka
    asdlfjalsdjf
    asdlfja;sldfjk
    asdlfjas;ldkfj
    asdlfjas;ldkjf
    asdlfjas'dlfjalsdjkf
    adslfjasldfkjalsdkjf
    asdlfkjasldfkjalsdkjf
    </div>
</div>
<script type="text/javascript">
$=document.getElementById("container");
alert($.scrollHeight+" "+$.scrollWidth);
</script>
</body>
</html>

 

 

 

 

 

clientLeft 10 边框宽

clientTop 10

clientWidth 323 可见区域宽(背景可见),包括内边距

clientHeight 123

 

offsetWidth 360

offsetHeight 160 包括边框

offsetLeft 300 包括边界 有定位元素时,从定位元素的内边距开始算起

offsetTop 100

style.left 不包括边界, 开发者给的                

style.width:开发者给的宽度

 

scrollHeight 540包括整个可以通过滚动可见的。为什么在IE下是520,而FF下是540,padding的影响?FF下不会将右边距算进去,去掉padding之后二者一致,都成了500

scrollLeft 0

scrollTop 0

scrollWidth 520 ;两者一样。

 

 

<html>,即document.documentElement,尽管可以有样式width,height,但clientWidth,clientHeight总是会与浏览器可见区域大小保持一致。

<body>,即document.body,可以应用任何CSS样式。

posted @ 2012-03-25 18:29  wuhao12  阅读(203)  评论(0编辑  收藏  举报