浅谈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下获取object(ActiveX)的Param的代码
Sep 15 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php 生成短网址原理及代码
2014/01/23 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP框架性能测试报告
2016/05/08 PHP
基于php编程规范(详解)
2017/08/17 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
九一八事变演讲稿
2014/09/05 职场文书
大学生实习证明范本
2014/09/19 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
工作感想范文
2015/08/07 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers