1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title> 6 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <style media="screen"> 8 #div{ 9 width:100px; 10 height:80px; 11 left:10px; 12 top:8px; 13 position:relative; 14 border:1px solid red; 15 margin:20px 10px; 16 padding:7px 6px; 17 } 18 </style> 19 </head> 20 <body style="border:1px solid #ccc"> 21 <div id="div"> 22 </div> 23 24 <script type="text/javascript"> 25 var divObj = document.getElementById("div"); 26 27 var dOffsetWidth = divObj.offsetWidth;//返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） 28 var $dOffsetWidth = $(divObj).outerWidth(true);//参数为true，包括外边距 29 30 var dOffsetHeight = divObj.offsetHeight;//返回元素的高度（包括元素高度、内边距和边框，不包括外边距） 31 var $dOffsetHeight = $(divObj).outerHeight(false);//参数为true，包括外边距 32 33 34 var dClientWidth = divObj.clientWidth;//返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） 35 var $dClientWidth = $(divObj).innerWidth(); 36 37 var dClientHeight = divObj.clientHeight;//返回元素的高度（包括元素高度、内边距，不包括边框和外边距） 38 var $dClientHeight = $(divObj).innerHeight(); 39 40 var dWidth = divObj.style.width;//返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） 41 var $dWidth = $(divObj).width();//width(val)设置宽 42 43 var dHeight = divObj.style.height;//返回元素的高度（包括元素高度，不包括内边距、边框和外边距） 44 var $dHeight = $(divObj).height();//height(val)设置高 45 46 var dscrollWidth = divObj.scrollWidth;//返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同 47 var dscrollHeight = divObj.scrollHeight;//返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同 48 49 50 console.log("dOffsetWidth:"+dOffsetWidth+'\n'+"dOffsetHeight:"+dOffsetHeight+'\n'+"dClientWidth:"+dClientWidth+'\n'+"dClientHeight:"+dClientHeight+'\n'+"dWidth:"+dWidth+'\n'+"dHeight:"+dHeight+'\n'+"dscrollWidth:"+dscrollWidth+'\n'+"dscrollHeight:"+dscrollHeight); 51 console.log("$dOffsetWidth:"+$dOffsetWidth+'\n'+"$dOffsetHeight:"+$dOffsetHeight+'\n'+"$dClientWidth:"+$dClientWidth+'\n'+"$dClientHeight:"+$dClientHeight+'\n'+"$dWidth:"+$dWidth+'\n'+"$dHeight:"+$dHeight); 52 53 /* 54 注意：offsetWidth(offsetHeight)与style.width(style.height)的区别 55 1. style.height 返回的是字符串，如28px，offsetWidth返回的是数值28，如果需要对取得的值进行计算，用offsetWidth比较方便;如果拿到offsetWidth设置style.left的值，需加'px'。 56 2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性 57 3. style.height的值需要事先定义，否则取到的值为空。而且必须要定义在html里，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。 58 */ 59 60 /* 61 总结： 62 1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高 63 2、若要获取元素包含边框的宽度，则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)获取 64 3、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度 65 4、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度 66 */ 67 </script> 68 69 </body> 70 </html>
浙公网安备 33010602011771号