编程 Javascript

浅谈jQuery中height与width

Posted in Javascript onJuly 06, 2015

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中height与width

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript编程起步（第四课）

Feb 27 Javascript

js获取当月最后一天实例代码

Nov 19 Javascript

JavaScript中标识符提升问题

Jun 11 Javascript

使用AngularJS创建自定义的过滤器的方法

Jun 18 Javascript

JavaScript中的cacheStorage使用详解

Jul 29 Javascript

AngularJS入门教程之Scope(作用域)

Jul 27 Javascript

第一次动手实现bootstrap table分页效果

Sep 22 Javascript

ajax级联菜单实现方法实例分析

Nov 28 Javascript

css配合JavaScript实现tab标签切换效果

Oct 11 Javascript

详解vuex中action何时完成以及如何正确调用dispatch的思考

Jan 21 Javascript

jQuery实现form表单基于ajax无刷新提交方法实例代码

Nov 04 jQuery

使用Vant完成Dialog弹框案例

Nov 11 Javascript

jQuery中$this和$(this)的区别介绍（一看就懂）

Jul 06 #Javascript

浅谈Javascript实现继承的方法

Jul 06 #Javascript

JavaScript保存并运算页面中数字类型变量的写法

Jul 06 #Javascript

angularjs客户端实现压缩图片文件并上传实例

Jul 06 #Javascript

jQuery 遍历函数详解

Jul 05 #Javascript

php结合imgareaselect实现图片裁剪

Jul 05 #Javascript

kindeditor编辑器点中图片滚动条往上顶的bug

Jul 05 #Javascript