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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
使用jquery如何获取时间
Oct 13 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
手写实现JS中的new
Nov 07 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
JavaScript的Function详细
2006/11/14 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
js实现下一页页码效果
2017/03/07 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
koa源码中promise的解读
2018/11/13 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
便利店投资的创业计划书
2014/01/12 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
高中体育教学反思
2014/01/29 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
情况说明书怎么写
2015/10/08 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
python 标准库原理与用法详解之os.path篇
2021/10/24 Python