浅谈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 相关文章推荐
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
常规表格多表头查询示例
Feb 21 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
js微信支付实现代码
Dec 22 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python获取array中指定元素的示例
2019/11/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
竞选班干部演讲稿
2014/04/24 职场文书
报到证办理个人委托书
2014/10/06 职场文书
民事赔偿协议书
2014/11/02 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
JavaScript流程控制(循环)
2021/12/06 Javascript
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python