学习jQuery笔记

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的

元素的 outer-width/height：

实例

$("button").click(function(){  vartxt="";   txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "
";   txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();   $("#div1").html(txt);});

当 box-sizing 设置为 content-box 时，width() 获取的值仍为element自身的宽度（border属性要加style，例如solid）

.runoob {width:100px;height:100px;padding:10px;border:15px solid black;box-sizing: content-box;}

• width() 获取的值为: 100px
• innerWidth() 获取的值为: 120px
• outWidth() 获取的值为: 150px

当 box-sizing 设置为 border-box时，width() 获取的值是 css 设置的 width 减去 padding 和 border 的值（border属性要加style，例如solid）

.runoob {width:100px;height:100px;padding:10px;border:15px solid black;box-sizing: border-box;}

• width() 获取的值为: 50px
• innerWidth() 获取的值为: 70px
• outWidth() 获取的值为: 100px