jQuery outerWidth() 方法

定义和用法

outerWidth() 方法返回第一个匹配元素的外部宽度。

如下面的图像所示，该方法包含 padding 和 border。

提示：如需包含 margin，请使用 outerWidth(true)。

语法

$(selector).outerWidth(includeMargin)

实例

下例演示了返回指定<div>元素的外部宽度/高度：

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>欢迎来到蝴蝶教程</title>
  //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <script>
     $(document).ready(function () {
         $("button").click(function(){
            var txt = "";
            txt += "div 宽度，包含内边距和边框：" + $("#div1").outerWidth() + "
";
            txt += "div 高度，包含内边距和边框：" + $("#div1").outerHeight();
            $("#div1").html(txt);
         });
      });
</script>
</head>
<body>
   <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;background-color:#ddd;">这是一个段落</div>
   <button>点击显示div元素的尺寸</button>
</body>
</html>

尝试一下

jQuery outerWidth() 方法

定义和用法

语法

实例

相关方法

相关页面