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

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

如果你要获取其它情况的宽度，请使用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

更多专业前端知识，请上【猿2048】www.mk2048.com

详细介绍jQuery.outerWidth() 函数具体用法相关推荐

php中sisson用法,详细介绍php中session的用法
PHP中的session默认情况下是使用客户端的Cookie.当客户端的Cookie被禁用时,会自动通过Query_String来传递. Php处理会话的函数一共有11个,我们详细介绍一下将要用到几个 ...
php removechild,介绍删除节点函数removeChild()用法
删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点.如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL. 语法: nodeObject.remo ...
s()++php,jquery siblings()函数正确用法
直接看一个例子: .test{color:#900;font-size: 0;border-radius: 6px;} .test span{display: inline-block;font-si ...
Oracle to_date()函数的用法
在Oracle数据库中,Oracle to_date()函数是我们经常使用的函数,下面就为您详细介绍Oracle to_date()函数的用法 to_date()与24小时制表示法及mm分钟的显示: ...
关于数据库having的用法的详细介绍
转自:微点阅读 https://www.weidianyuedu.com 数据库having的用法的用法你知道吗?下面小编就跟你们详细介绍下数据库having的用法的用法,希望对你们有用. 数据库h ...
数据库having的用法详细介绍
转自:微点阅读 https://www.weidianyuedu.com 数据库having的用法的用法你知道吗?下面微点阅读小编就跟你们详细介绍下数据库having的用法的用法,希望对你们有用. ...
mysql 字段最右匹配_Mysql字符串处理函数详细介绍、总结 -电脑资料
一.简明总结 ASCII(char) 返回字符的ASCII码值 BIT_LENGTH(str) 返回字符串的比特长度 CONCAT(s1,s2-,sn) 将s1,s2-,sn连接成字符串 CONCAT ...
hog函数的用法 python_Python常见内置函数用法（三）
本文作者:孙雪丽文字编辑:周聪聪技术总编:张学人重大通知!!!2019年6月22日至24日在河南郑州举行Stata编程技术特别训练营,招生工作已经圆满结束.另外爬虫俱乐部将于2019年7月5日至 ...
python中如何查一个函数的用法_Python常见内置函数用法（三）
本文作者:孙雪丽文字编辑:周聪聪技术总编:张学人重大通知!!!2019年6月22日至24日在河南郑州举行Stata编程技术特别训练营,招生工作已经圆满结束.另外爬虫俱乐部将于2019年7月5日至7 ...

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

详细介绍jQuery.outerWidth() 函数具体用法相关推荐

最新文章

热门文章