对js,jq 下div的各种宽度高度的小结

<div id="box" style="width:100px;height:100px;border:1px #000 solid;margin:10px;padding:3px;background:red;">div</div>

<script>var s1=$('div').width()//不带单位content 100pxvar s2=$('div').css('width')//带单位content 100var s3=$('div').innerWidth()//content+padding 106var s4=$('div').outerWidth()//content+padding+border 108vars5=$('div').outerWidth(true)//content+padding+border+margin 128var s6=document.getElementById('box').offsetWidth;//border+padding+content 108var s7=document.getElementById('box').offsetLeft;//body的margin-left 8+自身的margin-left 10 = 18var s8=document.getElementById('box').clientWidth;//padding+content 106var a9=document.getElementById('box').clientLeft;//border 1//高度是类似于宽度的，这里不再列举</script>