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 AspxButton的客户端操作
Jun 26 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP中的替代语法简介
2014/08/22 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
简单的php购物车代码
2020/06/05 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python zip()函数用法实例分析
2018/03/17 Python
python常用函数与用法示例
2019/07/02 Python
python模块常用用法实例详解
2019/10/17 Python
django 多数据库及分库实现方式
2020/04/01 Python
python3 配置logging日志类的操作
2020/04/08 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
个人工作表现评价材料
2014/09/21 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
世界文化遗产导游词
2015/02/13 职场文书
工作后的感想
2015/08/07 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers