width() / height() | 取得四配元素宽度和高度值只算width / height |
innerWidth()/ innerHieght | 取得四配元素宽度和高度值包含padding |
outerWidth()/ outerHeight() | 取得四配元素究度和高度值包含padding. border |
outerWidth(true)! outerHeight(true) | 取得匹配元素宽度和高度值包含padding. borde.margin |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function () {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
</html>