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)或者没有设置大小的元素就尤为麻烦