首页 > 代码库 > jQuery的width()、innerWidth()、outerWidth()方法
jQuery的width()、innerWidth()、outerWidth()方法
width():
不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。
innerWidth():
包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。
outerWidth():
包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。
1 <body>2 <div class="box"></div>3 </body>
1 <style>2 .box{ width: 100px;height: 100px;background-color: red; }3 </style>
1 <script> 2 $(function () { 3 //无边距 4 console.log("width",$(".box").width());//100px 5 console.log("innerWid", $(".box").innerWidth());//100px 6 console.log("outerWid",$(".box").outerWidth());//100px 7 //加padding 10px; 8 $(".box").css("padding", "10px"); 9 console.log("width", $(".box").width());//100px10 console.log("innerWid", $(".box").innerWidth());//120px11 console.log("outerWid", $(".box").outerWidth());//120px12 //加border 5px13 $(".box").css("border", "5px solid orange");14 console.log("width", $(".box").width());//100px15 console.log("innerWid", $(".box").innerWidth());//120px16 console.log("outerWid", $(".box").outerWidth());//130px17 //加margin 10px18 $(".box").css("margin", "10px");19 console.log("width", $(".box").width());//100px20 console.log("innerWid", $(".box").innerWidth());//120px21 console.log("outerWid", $(".box").outerWidth());//130px22 console.log("outerWid", $(".box").outerWidth(true));//150px23 })24 </script>
jQuery的width()、innerWidth()、outerWidth()方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。