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

下面我们来通过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

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

赞 (0)

相关推荐

  • jQuery增加自定义函数的方法

    本文实例讲述了jQuery增加自定义函数的方法.分享给大家供大家参考.具体如下: $.fn.myFunction = function() { return $(this).addClass('changed'); } //用法: $('.changePlease').myFunction(); 希望本文所述对大家的jquery程序设计有所帮助.

  • 在Python的Django框架中编写编译函数

    当遇到一个模板标签(template tag)时,模板解析器就会把标签包含的内容,以及模板解析器自己作为参数调用一个python函数. 这个函数负责返回一个和当前模板标签内容相对应的节点(Node)的实例. 例如,写一个显示当前日期的模板标签:{% current_time %}.该标签会根据参数指定的 strftime 格式(参见:http://www.djangoproject.com/r/python/strftime/)显示当前时间.首先确定标签的语法是个好主意. 在这个例子里,标签应该

  • Django中使用locals()函数的技巧

    对 current_datetime 的一次赋值操作: def current_datetime(request): now = datetime.datetime.now() return render_to_response('current_datetime.html', {'current_date': now}) 很多时候,就像在这个范例中那样,你发现自己一直在计算某个变量,保存结果到变量中(比如前面代码中的 now ),然后将这些变量发送给模板. 尤其喜欢偷懒的程序员应该注意到了,不

  • Django框架中render_to_response()函数的使用方法

    通常的情况是,我们一般会载入一个模板文件,然后用 Context渲染它,最后返回这个处理好的HttpResponse对象给用户. 我们已经优化了方案,使用 get_template() 方法代替繁杂的用代码来处理模板及其路径的工作. 但这仍然需要一定量的时间来敲出这些简化的代码. 这是一个普遍存在的重复苦力劳动.Django为此提供了一个捷径,让你一次性地载入某个模板文件,渲染它,然后将此作为 HttpResponse返回. 该捷径就是位于 django.shortcuts 模块中名为 rend

  • 在Python的Django框架中包装视图函数

    我们最终的视图技巧利用了一个高级python技术. 假设你发现自己在各个不同视图里重复了大量代码,就像 这个例子: def my_view1(request): if not request.user.is_authenticated(): return HttpResponseRedirect('/accounts/login/') # ... return render_to_response('template1.html') def my_view2(request): if not r

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

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

    下面我们来通过jQuery实例代码演示outerWidth()函数, outerWidth()函数用于设置或返回当前匹配元素的外宽度.外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为true,以包括外边距(margin)部分的宽度.如下图: 如果你要获取其它情况的宽度,请使用width()和innerWidth(),你可以点此查看三者之间的区别.该函数属于jQuery对象(实例),并且对不可见的元素依然有效.语法jQ

  • C++详细讲解常用math函数的用法

    目录 1.fabs(double x) 2.floor(double x)ceil(double x) 3.pow(double x,double n) 4.sqrt(double x) 5.log(double x) 6.sin(double x)cos(double x) tan(double x) 7.round(double x) 包含头文件 #include<cmath> 1.fabs(double x) 对double型变量取绝对值 #include<iostream>

  • jquery遍历函数siblings()用法实例

    本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

  • jQuery.extend 函数及用法详细

    jquery.extend函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

  • Oracle to_date()函数的用法介绍

    在Oracle数据库中,Oracle to_date()函数是我们经常使用的函数,下面就为您详细介绍Oracle to_date()函数的用法,希望可以对您有所启迪. to_date()与24小时制表示法及mm分钟的显示: 一.在使用Oracle的to_date函数来做日期转换时,很多Java程序员也许会直接的采用"yyyy-MM-dd HH:mm:ss"的格式作为格式进行转换,但是在Oracle中会引起错误:"ORA 01810 格式代码出现两次". select

  • jQuery源码分析之init的详细介绍

    init 构造器 由于这个函数直接和 jQuery() 的参数有关,先来说下能接受什么样的参数. 源码中接受 3 个参数: init: function (selector, context, root) { ... } jQuery() ,空参数,这个会直接返回一个空的 jQuery 对象,return this. jQuery( selector [, context ] ) ,这是一个标准且常用法,selector 表示一个 css 选择器,这个选择器通常是一个字符串,#id 或者 .cl

  • 逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

    首先给大家介绍jquery data()函数 jQuery中data()函数用于向被选元素附加数据,或者从被选元素获取数据.通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 一.jquery data()的作用 data() 方法向被选元素附加数据,或者从被选元素获取数据. 通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在. 该函数属于jQuery对象(实例).如果需要移除通过data()函数存放的数据,请使用 remov

  • 基于php split()函数的用法详解

    PHP函数split()的基本语法为:array split ( string $pattern, string $string [, int $limit] ).我们向大家举了两个例子来具体讲解这个函数的使用方法. 对于初学者来说,掌握PHP中常用函数的用法,是其继续学习的基础.今天我们就为大家详细介绍有关PHP函数split()的一些使用方法,希望大家能通过这篇文章介绍的内容增加自己的知识库.说明array split ( string $pattern, string $string [,

  • PHP中error_reporting函数用法详细介绍

    PHP中error_reporting函数用法详细介绍 PHP中对错误的处理会用到error_reporting函数,看到最多的是error_reporting(E_ALL ^ E_NOTICE),这个是什么意思呢?下面我们具体分析error_reporting函数. 定义用法 error_reporting() 设置 PHP 的报错级别并返回当前级别. 语法 error_reporting(report_level) 如果参数 report_level 未指定,当前报错级别将被返回.下面几项是

  • sql server数据库中raiserror函数用法的详细介绍

    sql server数据库中raiserror函数的用法 server数据库中raiserror的作用就和asp.NET中的throw new Exception一样,用于抛出一个异常或错误.这个错误可以被程序捕捉到. raiserror的常用格式如下: raiserror('错误的描述',错误的严重级别代码,错误的标识,错误的描述中的参数的值(这个可以是多个),一些其它参数),在官方上的格式描述如下: RAISERROR ( { msg_id | msg_str | @local_variab

随机推荐