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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
python迭代器实例简析
2014/09/25 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python中循环语句while用法实例
2015/05/16 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
keras 多gpu并行运行案例
2020/06/10 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
简短清晨问候语
2015/11/10 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python