1、 width和height：p标签的元素宽和高
2、 innerWidth和innerHeight：p标签的元素宽和高加上内边距
3、 outerWidth和outerHeight：p标签的元素宽和高加上内边距和边框
4、 outerWidth(true)和outerHeight(true)：p标签的元素宽和高加上内边距和边框还有外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery尺寸</title>
<link rel="stylesheet" type="text/css" href="css/jQuery.css"/>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p class="p1">操作我</p>
<button type="button" id="button1">width和height：p标签的元素宽和高</button>
<button type="button" id="button2">innerWidth和innerHeight：p标签的元素宽和高加上内边距</button>
<button type="button" id="button3">outerWidth和outerHeight：p标签的元素宽和高加上内边距和边框</button>
<button type="button" id="button4">outerWidth(true)和outerHeight(true)：p标签的元素宽和高加上内边距和边框还有外边距</button>
<script>
$("#button1").click(function() {
alert("h: "+$("p").height()+"--w:"+$("p").width());
})
$("#button2").click(function() {
alert("h: "+$("p").innerHeight()+"--w:"+$("p").innerWidth());
})
$("#button3").click(function() {
alert("h: "+$("p").outerHeight()+"--w:"+$("p").outerWidth());
})
$("#button4").click(function() {
alert("h: "+$("p").outerHeight(true)+"--w:"+$("p").outerWidth(true));
})
</script>
</body>
</html>
网友评论