JavaScript的DOM操作获取元素实际大小
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)或者没有设置大小的元素就尤为麻烦
