width, innerWidth, outerWidth
2018-03-09 19:23
351 查看
在jQuery中,width()方法用于获得元素宽度;innerWidth()方法用于获得包括内边界(padding)的元素宽度,outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说:对于同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);
代码中将p元素的宽度设计为200px;运行会输出200、220、240、260。
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());
alert(obj.innerWidth());
alert(obj.outerWidth());
alert(obj.outerWidth(true));
});
});
</script>
<p id="p_obj" style="background-color:yellow; width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>
相关文章推荐
- jQuery中的width()、heihgt()、innerWidth()、innerHeight()、outerWidth()和outerHeight()方法的区别
- jQuery中【width(),innerWidth(),outerWidth()】
- 图解offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset等
- jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
- jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
- 获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
- jQuery的width(),innerWidth(),outerWidth()的区别
- jquery width(), innerWidth(), outerWidth() 区别
- width、innerWidth、outerWidth(1)
- jQuery中width、innerWidth、outerWidth的区别
- JQ中的width(),height(),innerwidth(),innerheight(),outerwidth(),outheight()的区别
- BOM屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别
- jQuery的width()、innerWidth()、outerWidth()方法
- jquery中的尺寸函数width(),height(),innerWidth(),outerWidth()等的用法
- jq 计算div宽度--innerwidth,outerwidth,width
- jquery width,innerWidth,outerWidth 区别
- jquery 的 outerWidth() 、width() 、innerWidth()
- jQuery源码分析之width,height,innerWidth,innerHieght,outerWidth,outerHeight函数
- jQuery中的width(),innerWidth() ,outerWidth()和outerWidth(true)源码分析
- jquery 的 outerWidth() 、width() 、innerWidth()