浅谈jQuery中height与width

更新时间：2015年07月06日 09:30:40 投稿：hebedich

本文给大家简单谈谈jQuery中的获取高度和宽度的height和width方法，这里总结一下，方便大家更好的理解，有需要的小伙伴可以参考下。

jquery中有三个获取element高度的方法，分别是:height(),innerHeight(),outerHeght(bool);同样对应的有三个获取element宽度的方法:width(),innerHeight(),outerHeight(bool),这三个方法分别对应怎样的元素属性，如下图所示:

从上面的图可以了解到:height()方法对应顶部style设置的width属性;

innerHeight()对应width+padding-top+padding-bottom;

outerHeight()对应width+padding-top+padding-bottom+border-top+border-bottom;

另外看到下面outerHeight与outerWidth的值不一样是由于outerWidth(bool)方法参数被设置成true，
这时会加上margin-top和margin-bottom;
即:outerWidth = width+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

来个简单的示例吧

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("#id200").width("300px");
 });
});
</script>
</head>
<body>
<div id="id100" style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="id200" style="background:yellow;height:100px;width:100px">W3SCHOOL</div>
<button type="button">请点击这里</button>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

jQuery.Callbacks()回调函数队列用法详解
这篇文章主要介绍了jQuery.Callbacks()回调函数队列用法,结合实例形式详细分析了jQuery.Callbacks()回调函数队列的功能、控制标志含义与相关注意事项,需要的朋友可以参考下
2016-06-06
jQuery中bind,live,delegate与one方法的用法及区别解析
本篇文章主要是对jQuery中bind,live,delegate与one方法的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
jQuery+css实现图片滚动效果(附源码)
图片滚动效果想必大家都已司空见惯了吧，接下来本文介绍下jQuery+CSS实现图片滚动，感兴趣的你可不要错过了哈，希望可以帮助到你
2013-03-03
jquery数组过滤筛选方法grep()简介
这篇文章主要介绍了jquery数组过滤筛选方法grep()简介,需要的朋友可以参考下
2014-06-06
jquery获取特定name所有选中的checkbox,支持IE9标准模式
jquery获取特定name所有选中的checkbox,支持IE9标准模式，需要的朋友可以参考一下
2013-03-03
jQuery阻止冒泡和HTML默认操作
jQuery是一个快捷简便的JavaScript框架，说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。
2010-11-11
jQuery语法小结(超实用)
这篇文章主要介绍了jQuery语法小结(超实用)，涉及到jquery语法相关知识，对jquery语法相关知识感兴趣的朋友一起学习吧
2015-12-12
DIV随滚动条滚动而滚动的实现代码【推荐】
下面小编就为大家带来一篇DIV随滚动条滚动而滚动实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-04-04
jQuery事件与动画超详细讲解
在jquery中，jquery动画事件和动画函数经常用的到，今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数，对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧
2022-12-12
jQuery的deferred对象使用详解
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。
2011-08-08