编程 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 相关文章推荐

使用js实现一个可编辑的select下拉列表

Feb 20 Javascript

使用node.js半年来总结的 10 条经验

Aug 18 Javascript

JavaScript中扩展Array contains方法实例

Aug 23 Javascript

学习使用bootstrap3栅格系统

Apr 12 Javascript

常用原生JS兼容性写法汇总

Apr 27 Javascript

移动端界面的适配

Jan 11 Javascript

JS实现复选框的全选和批量删除功能

Apr 05 Javascript

JS实现获取汉字首字母拼音、全拼音及混拼音的方法

Nov 14 Javascript

集成vue到jquery/bootstrap项目的方法

Feb 10 jQuery

node.js通过axios实现网络请求的方法

Mar 05 Javascript

微信小程序onLaunch异步,首页onLoad先执行?

Sep 20 Javascript

vue-cli4使用全局less文件中的变量配置操作

Oct 21 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