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 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jquery实现网页定位导航
Aug 23 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
微信小程序开发探究
Dec 27 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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中加session验证)
2012/08/22 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jquery()函数的三种语法介绍
2013/10/09 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript实用方法总结
2015/02/06 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python实现简单socket通信的方法
2016/04/19 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
使用python绘制温度变化雷达图
2019/10/18 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
财务担保书范文
2014/04/02 职场文书
协议书模板
2014/04/23 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
房租涨价通知
2015/04/23 职场文书
回复函格式及范文
2015/07/14 职场文书
python之基数排序的实现
2021/07/26 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers