详细介绍jQuery.outerWidth() 函数具体用法


Posted in Javascript onJuly 20, 2015

下面我们来通过jQuery实例代码演示outerWidth()函数,

outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border),但不包括外边距(margin)部分的宽度。你也可以指定参数为true,以包括外边距(margin)部分的宽度。如下图:

详细介绍jQuery.outerWidth() 函数具体用法

如果你要获取其它情况的宽度,请使用width()和innerWidth(),你可以点此查看三者之间的区别。该函数属于jQuery对象(实例),并且对不可见的元素依然有效。语法jQuery 1.2.6 新增该函数。jQueryObject.outerWidth( [ includeMargin ] )注意:如果当前jQuery对象匹配多个元素,则只返回第一个匹配的元素的外宽度。参数参数 描述includeMargin 可选/Boolean类型指示是否包含外边距部分的宽度,默认为false。返回值outerWidth()函数的返回值为Number类型,返回第一个匹配元素的外宽度。如果当前jQuery对象匹配多个元素,返回外宽度时,outerWidth()函数只以其中第一个匹配的元素为准。如果没有匹配的元素,则返回null。outerWidth()不适用于window和document,请使用width()替代。示例&说明以下面这段HTML代码为例:

<div id="n1" style="margin:5px; padding: 10px; width:100px; height: 100px; border: 1px solid #000;"></div> 

<div id="n2" style="width:150px; height: 100px; background: #999;"></div>

以下jQuery示例代码用于演示outerWidth()函数的具体用法:

var $n1 = $("#n1"); 
var $n2 = $("#n2"); 
// outerWidth() = width(100) + padding(10*2) + border(1*2) = 122 
document.writeln( $n1.outerWidth() ); // 122 
document.writeln( $n2.outerWidth() ); // 150 
var $divs = $("div");

// 如果匹配多个元素,只返回第一个元素的outerWidth 

document.writeln( $divs.outerWidth() ); // 122 
//outerWidth(true) = width(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 
document.writeln( $n1.outerWidth(true) ); // 132

以上内容详细介绍了jQuery.outerWidth() 函数,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery获取和设置表单元素的方法
Feb 14 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
Angular表单验证实例详解
Oct 20 Javascript
详解angular element()方法使用
Apr 08 Javascript
Vue仿支付宝支付功能
May 25 Javascript
微信小程序实现评论功能
Nov 28 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
SWFObject基本用法实例分析
Jul 20 #Javascript
jQuery.prop() 使用详解
Jul 19 #Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 #Javascript
jQuery的position()方法详解
Jul 19 #Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 #Javascript
javascript中mouseover、mouseout使用详解
Jul 19 #Javascript
javascript实现的简单计时器
Jul 19 #Javascript
You might like
Twig模板引擎用法入门教程
2016/01/20 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
Jquery操作Ajax方法小结
2015/11/29 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python遍历类中所有成员的方法
2015/03/18 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
艺术用品:Arteza
2018/11/25 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
数学专业推荐信范文
2013/11/21 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
安全保证书范文
2014/04/29 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
党支部考察意见范文
2015/06/02 职场文书
2015年国培研修感言
2015/08/01 职场文书
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android