2018/2/2 19:08:18当前位置推荐好文程序员浏览文章

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>
网友评论