jquery获取元素的所有宽高(包括边框 内边距和外边距)
文章来源：365jz.com 点击数：174 更新时间：2024-09-18 17:07 参与评论
在jQuery中，可以使用.innerWidth()和.outerWidth()方法来获取元素的宽度，包括可选的内边距（padding）。对于外边距（margin）和边框（border），可以使用.outerWidth()方法，传入true作为参数以包括这些额外的尺寸。
width() - 返回元素的宽度。
height() - 返回元素的高度。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
返回文档（HTML 文档）$(document).height()的高度
返回窗口（浏览器视口）$(window).height()的高度
用一个实例来说明：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.z721d8container{
width: 100px;
height: 100px;
padding: 100px;
margin: 100px;
border: 10px solid #00FFFF;
background-color: blue;
}
</style>
</head>
<body>
<div class="z721d8container"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
var container= $(".z721d8container");
// 返回元素的宽、高
var width = container.width();
var height = container.height();
console.log("宽度:" + width + " 高度:" + height);
// 返回元素的宽、高，包括内边距(padding)但不包括边框(border)和外边距(margin)
var innerWidth = container.innerWidth();
var innerHeight = container.innerHeight();
console.log("包括内边距 宽度:" + innerWidth + " 高度:" + innerHeight);
// 返回元素的宽、高，包括内边距和边框，但不包括外边距
var outerWidth = container.outerWidth();
var outerHeight = container.outerHeight();
console.log("包括内边距和边框 宽度:" + outerWidth + " 高度:" + outerHeight);
// 返回元素的宽、高，包括内边距、边框和外边距
var outerWidthTrue = container.outerWidth(true);
var outerHeightTrue = container.outerHeight(true);
console.log("包括内外边距和边框 宽度:" + outerWidthTrue + " 高度:" + outerHeightTrue);
});
</script>
</body>
</html>如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
- 上一篇：复制移动整个文件夹php代码函数三种写法
- 下一篇：没有了
