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实用代码片段集合
Aug 12 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 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基础知识:类与对象(5) static
2006/12/13 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
php服务器的系统详解
2019/10/12 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
5款非常棒的Python工具
2018/01/05 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
实时获取Python的print输出流方法
2019/01/07 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
python中doctest库实例用法
2020/12/31 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
为什么会有内存对齐
2016/10/10 面试题
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
单位委托书格式范本
2014/09/29 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
工程质检员岗位职责
2015/04/08 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书