JavaScript的DOM操作获取元素实际大小

时间:2022-12-20 20:54:50

clientWidth 和 clientHeight 

  这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小。

  返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位,比如 100em之类,它还是会返回 px 的大小。(CSS 获取的话,是照着你设置的样式获取)。

<script type="text/javascript">
window.onload
= function(){
var box = document.getElementById("box");
alert(box.clientWidth);
//200
alert(box.clientHeight); //200
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>

   对于元素的实际大小,clientWidth 和 clientHeight 理解方式如下:
    1.增加边框,无变化,为 200;
    2.增加外边距,无变化,为 200;
    3.增加滚动条,最终值等于原本大小减去滚动条的大小,为 184;
    4.增加内边距,最终值等于原本大小加上内边距的大小,为 220;

  如果说没有设置任何 CSS 的宽和高度, IE 6,7,8浏览器则返回 0。那么其他 浏览器会算上滚动条和内边距的计算后的大小。

<script type="text/javascript">
window.onload
= function(){
var box = document.getElementById("box");
alert(box.clientWidth);
//220 加上了内边距
alert(box.clientHeight); //220 加上了内边距
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
border:20px solid red;
margin:30px;
padding:10px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>

   

 

 

二、scrollWidth 和 scrollHeight  

  这组属性可以获取滚动内容的元素大小。

  返回了元素大小,默认单位是 px。

<script type="text/javascript">
window.onload
= function(){
var box = document.getElementById("box");
alert(box.scrollWidth);
//200
alert(box.scrollWidth); //200
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>

   如果没有设置任何 CSS 的宽和高度,它会得到计算后的宽度和高度。

<script type="text/javascript">
window.onload
= function(){
var box = document.getElementById("box");
alert(box.scrollWidth);
//
alert(box.scrollWidth); //
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>

  对于元素的实际大小,scrollWidth 和 scrollHeight 理解如下:
    1.增加边框,不同浏览器有不同解释:
      a) Firefox 和 Opera 浏览器会增加边框的大小
      b) IE、Chrome 和 Safari 浏览器会忽略边框大小
      c) IE 浏览器只显示它本来内容的高度
    2.增加内边距,最终值会等于原本大小加上内边距大小
    3.增加滚动条,最终值会等于原本大小减去滚动条大小
    4.增加外边据,无变化。
    5.增加内容溢出,Firefox、Chrome 和 IE 获取实际内容高度,Opera 比前三个浏览器获取的高度偏小,Safari 比前三个浏览器获取的高度偏大。

 

 

 

三、offsetWidth 和 offsetHeight

  这组属性可以返回元素实际大小,包含边框、内边距和滚动条。

<script type="text/javascript">
window.onload
= function(){
var box = document.getElementById("box");
alert(box.offsetWidth);
//240
alert(box.offsetHeight); //240
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
border:10px solid red;
padding:10px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>

  如果没有设置任何 CSS 的宽和高度,他会得到计算后的宽度和高度即默认的宽度和高度。

<script type="text/javascript">
window.onload
= function(){
var box = document.getElementById("box");
alert(box.offsetWidth);
//1350
alert(box.offsetHeight); //18,火狐20
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body> 

  对于元素的实际大小,offsetWidth 和 offsetHeight 理解如下:

    1.增加边框,最终值会等于原本大小加上边框大小,为 220;
    2.增加内边距,最终值会等于原本大小加上内边距大小,为 220;
    3.增加外边据,无变化;
    4.增加滚动条,无变化,不会减小;

  对于元素大小的获取,一般是块级(block)元素并且以设置了 CSS 大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦