详细介绍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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 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
一个简洁的多级别论坛
2006/10/09 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
详解PHP中的Traits
2015/07/29 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
实例讲解PHP表单处理
2019/02/15 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python实现图书管理系统
2018/03/12 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python实现tail -f 功能
2020/01/17 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python的setattr函数实例用法
2020/12/16 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
自我评价正确写法范文
2013/12/10 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
教室布置标语
2014/06/26 职场文书
公司委托书范本5篇
2014/09/20 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014年体育工作总结
2014/11/24 职场文书
2016年母亲节广告语
2016/01/28 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL