offsetWidth、clientWidth、width、scrollWidth区别

1. <style>

2.  

3. #d1{

4. width: 300px;

5. height: 400px;

6. border: 5px solid #000;

7. margin: 10px;

8. padding: 10px;

9. }

10. </style>

11. <div id="d1"></div>

 

 

1、offsetWidth

       计算内容包含内容+边框+内边距   （高度计算同理）

1. var d1=document.getElementById("d1");

2. var d1Offset=d1.offsetWidth;

3. var d1OutWidth=$("#d1").outerWidth(false);(false不包含外边距)

4. var d1OutWidth1=$("#d1").outerWidth(true);（true包含外边距）

5. var d1OutWidth2=$("#d1").outerWidth();（默认不包含外边距）

6. console.log(d1Offset)（330）

7. console.log(d1OutWidth,d1OutWidth1,d1OutWidth2)（330 350 330）

2、clientWidth

        计算内容 包含 内容+内边距  （不包含外边距和边框）（宽度计算同理）

1. var d1Offset=d1.clientWidth;

2. var d1OutWidth2=$("#d1").innerWidth(); （括号内没有值）

3. console.log(d1Offset) 320

4. console.log(d1OutWidth2) 320

3、width

    计算内容包含  内容 （不包含内外边距和边框）

1. var d1Offset=d1.style.width;

2. var d1OutWidth2=$("#d1").width(); (括号内写值代表赋值)

3. console.log(d1Offset) 300

4. console.log(d1OutWidth2) 300

4、scrollWidth

计算内容包含 内容+内边距+溢出的尺寸 （不包含外边距和边框）

1. var d1Offset=d1.scrollWidth;

2.  

3. console.log(d1Offset) 320 jq没有