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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
js日期时间补零的小例子
Mar 05 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
jQuery 动态粒子效果示例代码
Jul 07 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
详解jQuery事件
2017/01/13 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python读取xlsx的方法
2018/12/25 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python中对_init_的理解及实例解析
2019/10/11 Python
解决python 找不到module的问题
2020/02/12 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
C语言笔试集
2012/07/24 面试题
毕业生找工作求职信
2014/08/05 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
慰问信格式规范
2015/03/23 职场文书
小学生表扬稿范文
2015/05/05 职场文书
施工安全保证书
2015/05/09 职场文书
合同审查法律意见书
2015/06/04 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python