额。前几天因为电脑屏幕被我坐坏了,没有办法更(借口借口,坏了三天而已,自己懒)
我自己也是新人,如果有哪里说的不对的地方,希望大家能够留言批评纠正,谢谢大家!(虽然没有几个人看)
言归正传,今天说说各种宽高,和各种距离
1.样式宽/高( style.width/style.height)
同时说明,这个值通过document.getElementById("id").style.width读取不到,只有将元素的样式设置成内嵌式的,才可以通过 来获取宽度值;
单纯的元素的宽高贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽高</title>
<style type="text/css">
#div2 {
width:200px;
height:200px;
border:1px solid white;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
//alert(oDiv.style.width);
//alert(oDiv.clientWidth);
//alert(oDiv.offsetWidth);
alert(oDiv2.offsetTop);
}
</script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background:red;padding:50px;border:50px solid blue;margin:50px;">
<div id="div2"></div><!--这是为了更好的视觉效果,没有这个会更严谨因为他也有宽-->
</div>
</body>
</html>
我们得到的是div的样式宽-------->200px
2.clientWidth,可视宽;指的是样式宽加上padding值在上面这个例子中,将会是300(这个没有单位)
3.offsetWidth:占位宽:指的是可视宽加上border值,在上面这个例子中,将会是400(这个没有单位)
4.offsetTop:定位高:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离。在上面的例子中,将会是150(这个没有单位)
(1)如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。
(2)如果父元素有定位,所谓的定位就是position属性值为relative、absolute或者fixed。则是子元素顶部到父元素的距离
贴出代码(与上面相比就是改了样式)
上面的例子就是当父级(div1)没有定位时,div2的offsetTop就是div2距离文档内壁的距离(
父级的padding+border+margin=150)
下面的代码就是 当父级(div1)有定位,div2的offsetTop就是div2距离父级div1的距离-------->50px(父级的padding)
#div1 {
position:absolute;
}
#div2 {
width:200px;
height:200px;
border:1px solid white;
}
5.scollTop:滚动高;滚动条到文档顶部的高
5.scollWidth/Height:内容宽,元素内容实际的宽,不包括滚动条所占用的空间(当我们使用了overflow属性的时候)
若div的内容没有超出它的高度,效果和clientHeight一样 .属性值等于height+padding-top+padding-bottom。
若div的内容超过了他的高度,返回的是元素的实际内容的宽度,值=子元素的height值+父元素的padding-top+父元素padding-bottom。)