浅谈jQuery中height与width


Posted in Javascript onJuly 06, 2015

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

浅谈jQuery中height与width

从上面的图可以了解到: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>

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

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