<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; /*box-sizing: border-box;*/ } .a{ width: 100px; height: 100px; background-color: red; /*margin:30px;*/ padding: 30px; border:30px solid #969696; } </style> </head> <body> <section id = ‘s‘class="a"></section> <script type="text/javascript"> alert(‘clientWidth:‘+document.getElementById("s").clientWidth); alert(‘clientHeight:‘+document.getElementById("s").clientHeight); alert(‘offsetWidth:‘+document.getElementById("s").offsetWidth); alert(‘offsetHeight:‘+document.getElementById("s").offsetHeight); alert(‘scrollWidth:‘+document.getElementById("s").scrollWidth); alert(‘scrollHeight:‘+document.getElementById("s").scrollHeight); alert(‘scrollTop:‘+document.getElementById("s").scrollTop); alert(‘scrollLeft:‘+document.getElementById("s").scrollLeft); alert(‘screenTop:‘+window.screenTop); alert(‘screenLeft:‘+window.screenLeft); alert(‘screen.height:‘+window.screen.height); alert(‘screen.width:‘+window.screen.width); alert(‘screen.availHeight:‘+window.screen.availHeight); alert(‘screen.availWidth:‘+window.screen.availWidth); </script> </body> </html>
原文：http://www.cnblogs.com/rysly/p/clientWidth_usage.html