其实写这篇博客的原因,是为了记录一下自己对一些属性的理解,也是为了告诉自己问题 一定要解决,不能拖,不然到后来会发现自己不会的越积累 越多,最终就会失去信心了。
下面就步入正题:
offsetWidth、offsetHeight、offsetLeft、offsetTop以及scrollTop,scrollLeft为了更好的理解它们,我将它们分为三组分别为
1、offsetWidth、offsetHeight
这两个属性的值只与该元素有关, 与周围的元素(父级与子级元素无关)。
代码示例:
<style type="text/css">
body {
border:20px solid yellow;
margin:20px;
padding:40px;
background:#d1d1d1;
}
#test {
width:400px;
height:200px;
padding:20px;
background:blue;
border:5px solid red;
}
</style>
</head>
<body>
<div id="test"></div>
<script>
var test = document.getElementById("test");
test.innerHTML = "<p>offsetWidth:" + test.offsetWidth + "</p>" +
"<p>offsetHeight:"+test.offsetHeight+"</p>"+
"<p>offsetLeft:"+test.offsetLeft+"</p>"+
"<p>offsetTop:"+test.offsetTop+"</p>";
</script>
</body>
代码结果展示:
接下来看代码中text的布局图:
offsetWidth = border-left + border-right + padding-left+padding-right+元素本身的宽度;
offsetHeight = border-top + border-bottom + padding-top+padding-bottom+元素本身的高度;
显而易见是450和250
2、offsetLeft、offsetTop
这两个属性与offsetParent有关,查阅了别的文档,其 英文解释:返回该对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。
代码依然是上述代码
通过上述代码,可以计算出offsetTop = pardent.margin-top +pardent.border-width+ pardent.padding-width =20+20+40;
同理offsetLeft也是这样计算的,都是跟父元素有关系。
3、scrollTop,scrollLeft
这两个属性是相对于滚动条,垂直位置,当滚动条不存在的时候,obj.scrollLeft 和obj.scrollTop的值为0,滚动条存在的时候, 不同位置值是不同的。
总结:
上面的这些属性,主要是文字和图片的滚动时使用的,这些是我的个人在工作的过程中的理解,希望对大家有帮助,不对的地方,也希望可以指出,一起进步!