jQuery帮助之CSS尺寸(五)outerHeight、outerWidth


Posted in Javascript onNovember 14, 2009

以便更好控制元素来满足我们的要求,那么我们可以通过outerHeight(options)和outerWidth(options)来获取到这部分的高度和宽度。

outerHeight(options)
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部高度。
HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

结果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

outerWidth(options)
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部宽度。
HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

结果:
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

Javascript 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
jquery 可排列的表实现代码
Nov 13 #Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 #Javascript
传智播客学习之JavaScript基础篇
Nov 13 #Javascript
用document.documentElement取代document.body的原因分析
Nov 12 #Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 #Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 #Javascript
jquery控制listbox中项的移动并排序
Nov 12 #Javascript
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Javascript 对象的解释
2008/11/24 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
详解vue组件基础
2018/05/04 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python操作MySQL简单实现方法
2015/01/26 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
法制主题班会教案
2015/08/13 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android