clientWidth,clientHeight与offsetWidth,offsetHeight的区别

<div id="myDiv" style="border:1px solid red;width:300px;height:300px; padding:30px; overflow:scroll;">abc</div>

<script type="text/javascript">  $(document).ready(function(){      alert("offsetWidth: " + $("#myDiv")[0].offsetWidth);      alert("clientWidth: " + $("#myDiv")[0].clientWidth);      alert("offsetHeight: " + $("#myDiv")[0].offsetHeight);       alert("clientHeight: " + $("#myDiv")[0].clientHeight)  })</script>

可见：offsetWidth: width + padding + border

clientWidth: width + padding - 滚动条

offsetHeight: height + padding + border

clientHeight: height + padding - 滚动条

总结记忆：
var common = (height/width + padding)
offsetWidth,offsetHeight –> common + border;
clientWidth,clientHeight –> common - 滚动条