极客教程jQuery outerWidth()方法
jQuery的outerWidth()方法是用来返回一个元素的外部宽度，包括边框和填充。
语法:
$(selector).outerWidth( includemargin )
参数：该方法接受单个参数includeMargin，这是可选的。它包含一个布尔值，用于指定是否包含保证金。如果includeMargin被设置为 “true”，那么保证金就被包括在内，否则就不包括。默认情况下，includeMargin设置为false。
例子1：这个例子显示了包括边距在内的外部宽度。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery outerWidth() Method
</title>
<!-- Style to create box -->
<style>
.GFG {
height: 200px;
width: 350px;
padding: 20px;
margin: 3px;
border: 3px solid green;
background-color: lightgreen;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to display outerWidth of
box including margin -->
<script>
(document).ready(function() {
("button").click(function(){
alert("Outer width of div: "
+ $("div").outerWidth(true));
});
});
</script>
</head>
<body>
<button>outerwidth</button>
<div class="GFG"></div>
</body>
</html>
在点击按钮之前：
点击按钮后：
例子2：这个例子显示的是外部宽度，不包括边距。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery outerWidth() Method
</title>
<!-- Style to create box -->
<style>
.GFG {
height: 200px;
width: 350px;
padding: 20px;
margin: 3px;
border: 3px solid green;
background-color: lightgreen;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to display outer width excluding margin -->
<script>
(document).ready(function() {
("button").click(function() {
alert("Outer width of div: "
+ $("div").outerWidth());
});
});
</script>
</head>
<body>
<button>outerwidth</button>
<div class = "GFG"></div>
</body>
</html>
在点击按钮之前：
点击按钮后：
