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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
js闭包的9个使用场景
Dec 29 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
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php实现微信模板消息推送
2018/03/30 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
js 编写规范
2010/03/03 Javascript
Ext 今日学习总结
2010/09/19 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Python备份Mysql脚本
2008/08/11 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
django 环境变量配置过程详解
2019/08/06 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python的链表基础知识点
2020/09/13 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
《扇形统计图》教学反思
2016/02/17 职场文书
车辆挂靠协议书
2016/03/23 职场文书