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

IE 上下滚动展示模仿Marquee机制

Dec 20 Javascript

checkbox使用示例

Aug 23 Javascript

jquery事件的ready()方法使用详解

Nov 11 Javascript

jQuery实现的AJAX简单弹出层效果代码

Nov 26 Javascript

快速掌握Node.js事件驱动模型

Mar 21 Javascript

谈谈JavaScript中浏览器兼容问题的写法小议

Dec 17 Javascript

jQuery层级选择器实例代码

Feb 06 Javascript

vue监听input标签的value值方法

Aug 27 Javascript

浅谈express.js框架中间件（middleware）

Apr 07 Javascript

javascript实现的字符串转换成数组操作示例

Jun 13 Javascript

vue+vant使用图片预览功能ImagePreview的问题解决

Apr 10 Javascript

WebWorker 封装 JavaScript 沙箱详情

Nov 02 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

You might like

php数组的一些常见操作汇总

2011/07/17 PHP

深入浅出php socket编程

2015/05/13 PHP

详解PHP PDO简单教程

2019/05/28 PHP

Javascript 浮点运算的问题分析与解决方法

2013/08/27 Javascript

在JavaScript中使用timer示例

2014/05/08 Javascript

JS使用cookie实现DIV提示框只显示一次的方法

2015/11/05 Javascript

JavaScript获取当前运行脚本文件所在目录的方法

2016/02/03 Javascript

使用JQuery 加载页面时调用JS的实现方法

2016/05/30 Javascript

全面解析Bootstrap中scrollspy（滚动监听）的使用方法

2016/06/06 Javascript

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

2016/10/30 Javascript

Bootstrap CSS布局之表格

2016/12/17 Javascript

get post jsonp三种数据交互形式实例详解

2017/08/25 Javascript

vue绑定的点击事件阻止冒泡的实例

2018/02/08 Javascript

JavaScript如何对图片进行黑白化

2018/04/10 Javascript

AngularJS中ng-options实现下拉列表的数据绑定方法

2018/08/13 Javascript

javascript读取本地文件和目录方法详解

2020/08/06 Javascript

封装Vue Element的table表格组件的示例详解

2020/08/19 Javascript

vue界面发送表情的实现代码

2020/09/11 Javascript

在nodejs中创建child process的方法

2021/01/26 NodeJs

[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic

2016/03/03 DOTA

python获得linux下所有挂载点（mount points）的方法

2015/04/29 Python

Python抓取框架 Scrapy的架构

2016/08/12 Python

Python使用PyCrypto实现AES加密功能示例

2017/05/22 Python

python利用插值法对折线进行平滑曲线处理

2018/12/25 Python

scrapy-redis源码分析之发送POST请求详解

2019/05/15 Python

python运用pygame库实现双人弹球小游戏

2019/11/25 Python

基于Python检测动态物体颜色过程解析

2019/12/04 Python

Python PyPDF2模块安装使用解析

2020/01/19 Python

Hanro官网：奢华男士和女士内衣、睡衣和家居服

2018/10/25 全球购物

党员组织关系介绍信

2014/02/13 职场文书

家长通知书家长评语

2014/04/17 职场文书

学习实践科学发展观心得体会

2014/09/10 职场文书

2014年财务工作自我评价

2014/09/23 职场文书

教师党员先进性教育自我剖析材料思想汇报

2014/09/24 职场文书

python xlwt模块的使用解析

2021/04/13 Python

使用JS实现简易计算器

2021/06/14 Javascript