📌 相关文章
- jQuery | externalWidth() 方法
- jQuery | externalWidth() 方法
- jquery 方法 - Javascript (1)
- jQuery | html() 方法(1)
- jQuery | html() 方法
- jQuery | html() 方法
- jquery 方法 - Javascript 代码示例
- jQuery | css() 方法(1)
- jQuery | css() 方法
- jQuery | css() 方法
- jquery (1)
- jQuery示例
- jQuery示例(1)
- jQuery | jquery 属性(1)
- jQuery | jquery 属性
- jQuery | jquery 属性
- jQuery | jquery 属性(1)
- jQuery | get() 方法
- jQuery | get() 方法
- jQuery get()方法
- jQuery | get() 方法(1)
- jQuery | get() 方法(1)
- jQuery get()方法(1)
- jQuery |合并（）方法
- jQuery |合并()方法
- jQuery |合并（）方法(1)
- jQuery |合并()方法(1)
- jQuery 奇数() 方法(1)
- jQuery 奇数() 方法(1)
📜 jQuery | externalWidth() 方法(1)
📅 最后修改于: 2023-12-03 15:16:47.288000 🧑 作者: Mango
jQuery | externalWidth() 方法
简介
externalWidth() 方法返回选定元素的外部宽度，包括padding，border和margin在内。此方法只能用于可见元素，因为隐藏元素没有高度和宽度，所以无法返回正确的值。
语法
$(selector).externalWidth(boolean);
参数说明：
boolean：可选。如果设置为true，则margin值也将被计算。默认值为false。
返回值
externalWidth() 方法返回包括padding，border和margin在内的元素的外部宽度，以像素为单位。如果选择器匹配多个元素，则返回第一个元素的外部宽度。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>jQuery externalWidth() 方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>外部宽度（包含 padding 和 border）： <span id="externalWidth1"></span> px</p>
<p>外部宽度（包含 padding、border 和 margin）：<span id="externalWidth2"></span> px</p>
<script>
$(function(){
var externalWidth1 = $('.box').externalWidth(); // 计算外部宽度（不包括 margin）
var externalWidth2 = $('.box').externalWidth(true); // 计算外部宽度（包括 margin）
$('#externalWidth1').text(externalWidth1);
$('#externalWidth2').text(externalWidth2);
});
</script>
</body>
</html>
效果演示
以上就是jQuery的externalWidth()方法的介绍，欢迎大家学习及使用。