详细介绍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 相关文章推荐
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
js判断密码强度的方法
Mar 18 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
easyui的tabs update正确用法分享
2014/03/21 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
微信小程序之蓝牙的链接
2017/09/26 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
战友聚会邀请函
2014/01/18 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
Python绘制分类图的方法
2021/04/20 Python