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 相关文章推荐
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
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
合作指挥官:孟斯克
2020/03/16 星际争霸
php 阴历-农历-转换类代码
2012/01/16 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
构建Python包的五个简单准则简介
2015/06/15 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
彻底搞懂Python字符编码
2018/01/23 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
教育专业个人求职信
2013/12/02 职场文书
技校毕业生自荐信
2014/06/03 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
医生见习报告范文
2014/11/03 职场文书
2015年母亲节寄语
2015/03/23 职场文书
雾霾停课通知
2015/04/24 职场文书
辞职离别感言
2015/08/04 职场文书
《给予树》教学反思
2016/03/03 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python