浅谈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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
js实现移动端轮播图滑动切换
Dec 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
You might like
深入密码加salt原理的分析
2013/06/06 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js获取视频时长代码
2014/04/10 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
深入浅析Python的类
2018/06/22 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Django 静态文件配置过程详解
2019/07/23 Python
Python实现图片添加文字
2019/11/26 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
人事专员岗位职责
2013/11/20 职场文书
新年主持词
2014/03/27 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
高一地理教学工作总结
2015/08/12 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技