JavaScript中宽高和位置的总结

第一部分：原生JavaScript部分

---

1.clientWidth和clientHeight

描述：content + padding，不包含滚动条和border。

---

HTML：

    

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

        test

    

CSS：

JavaScript：

结果：

Paste_Image.png

---

2.offsetWidth和offsetHeight

描述：content + padding + border，包含滚动条。

---

HTML和CSS代码同上：

---

JavaScript：

结果：

Paste_Image.png

---

3.scrollWidth和scrollHeight

描述：content(包含滚动区域) + padding，不包含滚动条和border。

---

HTML和CSS代码同上：

---

JavaScript：

结果：

Paste_Image.png

---

总结：

1. clientWidth = content + padding；
2. offsetWidth = content + padding + border；
3. scrollWidth = content(包含滚动区域) + padding。
   这三个属性都是只读属性，只能取值，不能赋值。

---

4.clientLeft和clientTop

描述：对象的边框宽度。clientLeft为左边框宽度，clientTop为上边框宽度。

---

HTML和CSS代码同上：

---

JavaScript：

结果：

Paste_Image.png

---

5.offsetLeft和offsetTop

补充：offsetParent：返回该对象带有定位的最近的父级元素，如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
描述：offsetLeft和offsetTop分别为相对于offsetParent的左边距离和上边距离。

---

HTML和CSS代码同上：

---

JavaScript：

结果：

Paste_Image.png

这里的div父级元素就是body，父级没有定位元素offsetParent就是body，而div的margin为100，所以div的offsetLeft和offsetTop都是100。

---

6.scrollLeft和scrollTop

描述：当对象内容超出其宽高的时候，元素被卷起的宽度和高度。

---

HTML和CSS代码同上：

---

JavaScript：

结果：

Paste_Image.png

总结：

1. clientLeft是对象的边框宽度；
2. offsetLeft为相对于offsetParent的左边距离；
3. scrollLeft为元素被卷起的宽度。
   clientLeft和offsetLeft为只读属性，而scrollLeft可以取值，也可以赋值。

---

7.style.top，style.bottom，style.left，style.right

描述：进行CSS定位（position为absolute或relative）的对象才有的属性。

style.top和offsetTop的区别：

1. offsetTop可以返回没有定位的元素距离上边的距离，而只有定位的元素才有style.top；
2. offsetTop返回的值是纯数字，而style.top返回的值带有单位px，所以是字符串；
3. offsetTop为只读属性，而style.top可读写；
4. style.top只能获取行内样式设置的值，而offsetTop没有限制；

---

第二部分：Jquery部分

---

此处使用的jQuery版本为3.1.0

---

1.width()和height()

---

描述：content，不包含滚动条和padding以及border。

---

HTML和CSS代码同上：

---

JavaScript：

---

结果：

Paste_Image.png

---

2.innerWidth()和innerHeight()

---

描述：content + padding，不包含滚动条和border。

---

HTML和CSS代码同上：

---

JavaScript：

---

结果：

Paste_Image.png

---

3.outerWidth()和outerHeight()

---

描述：content + padding + border。

---

HTML和CSS代码同上：

---

JavaScript：

---

结果：

Paste_Image.png

---

总结：

1. width() = content;
2. innerWidth = content + padding;
3. outerWidth = content + padding +border;
   jQuery中的这三个属性不传参数就是取值，传参数就是赋值，详情见jQueryAPI。

---

4.offset()

---

描述：获取匹配元素在当前视口的相对偏移。

---

HTML:

---

    

        

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

            test

        
    

---

CSS：

---

---

JavaScript：

---

结果：

Paste_Image.png

---

5.position()

---

描述：获取匹配元素相对父元素的偏移。（不包括margin）

---

HTML和CSS同上：

---

JavaScript：

---

结果：

Paste_Image.png

---

6.scrollTop()和scrollLeft()

---

描述：获取匹配元素相对滚动条顶部和左侧的偏移。（其值等于原生js中的scrollTop和scrollLeft）

---

HTML和CSS同上：

---

JavaScript：

---

结果：

Paste_Image.png