jQuery - HTML DOM 操作（四）

jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，显得更加地简便。

jQuery 中提供了获取元素的尺寸（宽度和高度）的方法，这些方法获取的尺寸不尽相同，下面就将这些方法进行介绍。

width()/height()

width()： 设置或返回元素的宽度（不包括 padding、border 和 margin）；
height()： 设置或返回元素的高度（不包括 padding、border 和 margin）。

innerWidth()/innerHeight()

innerWidth()： 设置或返回元素的宽度（包括 padding，不包括 border 和 margin）；
innerHeight()： 设置或返回元素的高度（包括 padding，不包括 border 和 margin）。

outerWidth()/outerHeight()

outerWidth()： 设置或返回元素的宽度（包括 padding 和 border，不包括 margin）；
outerHeight()： 设置或返回元素的高度（包括 padding 和 border，不包括 margin）。

outerWidth(true)/outerHeight(true)

outerWidth(true)： 设置或返回元素的宽度（包括 padding、border 和 margin）；
outerHeight(true)： 设置或返回元素的高度（包括 padding、border 和 margin）。

下面看一个例子，div 的 width=400px，height=400px，border=5px，padding=10px，margin=15px。

代码：

    
    
    
    



width/height
innerWidth/innerHeight
outerWidth/outerHeight
outerWidth(true)/outerHeight(true)

效果演示：

尺寸.gif

注意： 从上面的演示可以看到，width()/height() 和 innerWidth()/innerHeight() 均比正常值多出 0.4px，笔者是在 1920x1080 的屏幕上演示的，而在 1366x768 的屏幕上则没有此问题。