详细介绍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 核心函数以及jQuery对象
Mar 23 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
javascript实现数字时钟效果
Feb 06 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python找出完数的方法
2018/11/12 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
用python实现学生管理系统
2020/07/24 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
网络方面基础面试题
2012/11/16 面试题
Servlet的生命周期
2013/08/25 面试题
行政文秘岗位职责范本
2014/02/10 职场文书
安全目标责任书
2014/07/22 职场文书
民族学专业求职信
2014/07/28 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
外出听课学习心得体会
2016/01/15 职场文书
导游词之日本富士山
2020/01/06 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python