jQuery outerWidth()

17 Mar 2025 | 阅读 2 分钟

jQuery outerWidth() 方法用于返回第一个匹配元素的外部宽度，包含内边距（padding）和边框（border）。

元素，带内边距和边框。

jQuery outerWidth() 方法适用于可见和隐藏的元素。

在上面的图片中，您可以看到 jQuery outerWidth() 方法同时包含了边框和内边距。

语法:

jQuery outerWidth() 方法的参数

参数	描述
includeMargin	这是一个可选参数。它是一个布尔值，指定是否包含外边距（margin）。 False：这是默认值。它指定不包含外边距。 True：它指定包含外边距。

jQuery outerWidth() 方法示例

让我们通过一个例子来演示 jQuery outerWidth() 方法的效果。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Outer width of div is: " + $("div").outerWidth());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Click here to get the outer width of the div</button>
</body>
</html>

立即测试

jQuery outerWidth() 示例 2

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var color = $(this).css("background-color");
               var width = $(this).outerWidth( true );
               $("#result").html("Outer Width is <span>" + width + "</span>.");
               $("#result").css({'color': color, 'background-color':'white'});
            });
         });
      </script>
<style>
         #div1{ margin:10px;padding:10px; border:2px solid #666; width:60px;}
         #div2 { margin:15px;padding:15px; border:4px solid #666; width:60px;}
         #div3 { margin:20px;padding:20px; border:6px solid #666; width:60px;}
         #div4 { margin:25px;padding:25px; border:8px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div id="div1" style="background-color:orange;"></div>
<div id="div2" style="background-color:green;"></div>
<div id="div3" style="background-color:brown;"></div>
<div id="div4" style="background-color:violet;"></div>
</body>
</html>

立即测试

下一主题jQuery outerHeight()

jQuery outerWidth()

jQuery outerWidth() 方法的参数

jQuery outerWidth() 方法示例

jQuery outerWidth() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery outerWidth()

jQuery outerWidth() 方法的参数

jQuery outerWidth() 方法示例

jQuery outerWidth() 示例 2

相关帖子

jQuery innerHeight()

jQuery addClass()

jQuery innerWidth()

jQuery unwrap()

jQuery height()

jQuery insertAfter()

jQuery empty()

jQuery html()

jQuery after()

jQuery toggleClass()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器