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 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
原生javascript获取元素样式
Dec 31 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
vue 实现上传组件
May 31 Vue.js
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三层结构(上) 简单三层结构
2010/07/04 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python中一行和多行import模块问题
2018/04/01 Python
TensorFlow的权值更新方法
2018/06/14 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
商铺门前三包责任书
2014/07/25 职场文书
初中中等生评语
2014/12/29 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
MySQL 5.7常见数据类型
2021/07/15 MySQL
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android