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

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


http://files.jb51.net/file_images/article/201507/2015720174458369.png?2015620174546
如果你要获取其它情况的宽度,请使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362118.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQLite 入门教程(一)基本控制台(终端)命令

一、基本简介 SQLite 是一个自持的&#xff08;self-contained&#xff09;、无服务器的、零配置的、事务型的关系型数据库引擎。因为他很小&#xff0c;所以也可以作为嵌入式数据库内建在你的应用程序中。SQLite 被应用在 Solaris 10操作系统、Mac OS 操作系统、iPhone 和 Sky…

Web前端开发css基础样式总结

颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单位 1. px像素&#xff08;Pixel&#xff09;。像素,与分辨率…

nth-child(n)和nth-of-type(n)

:nth-child(n)&#xff1a;父元素的子元素的第n个 :nth-of-type(n)&#xff1a;父元素的 某类 子元素的第n个 注&#xff1a;n从0起&#xff0c;元素index从1起 nth-child(n)和nth-of-type(n)例&#xff1a; <head><style>body :nth-child(2) {height: 30px;ba…

记录您的里程和社区运行情况:Java EE 7真实体验

miles2run.org是跟踪跑步活动并与亲朋好友共享的简便方法。 可以创建然后跟踪基于天或基于距离的目标。 它还允许创建社区运行目标&#xff0c;并使多个跑步者参与并跟踪他们朝着该目标的活动。 您也可以找出本地跑步者并与他们联系。 该项目已开始&#xff0c;以帮助跟踪#Jav…

oracle在group by时某列有多个值的拼接

最近编码过程中出现了group by后&#xff0c;某些列会有多个值&#xff0c;而我需要把这些多个值的列进行拼接的情况&#xff0c;和大家分享一下。 有如下表student&#xff1a; 我们希望以class分组&#xff0c;每组的信息平铺&#xff0c;效果如下 分组首先想到的肯定是group…

在Spring中使用Asciidoctor:使用Spring MVC渲染Asciidoc文档

Asciidoc是一种基于文本的文档格式&#xff0c;因此如果要将文档提交到版本控制系统中并跟踪不同版本之间的更改&#xff0c;它非常有用。 这使Asciidoc成为编写书籍&#xff0c;技术文档&#xff0c;常见问题解答或用户手册的理想工具。 创建Asciidoc文档后&#xff0c;很可能…

http强缓存在firefox和chrome之间的差异

最近回顾HTTP缓存知识的时候发现了一个问题&#xff0c;设置了强缓存和协商缓存的文件&#xff0c;点击浏览器的刷新按钮的时候在chrome和firefox中的表现不一样。具体表现为chrome走强缓存没有再次发起请求。firefox却在强缓存没有失效的情况下发了请求&#xff0c;返回了304走…

垃圾收集器–串行,并行,CMS,G1(以及Java 8中的新增功能)

4个Java垃圾收集器–错误的选择如何严重影响性能 在2014年&#xff0c;对于大多数开发人员来说&#xff0c;还有两件事仍然是个谜&#xff1a;垃圾收集和了解异性。 由于我对后者知之甚少&#xff0c;所以我认为我会对前者大吃一惊&#xff0c;特别是因为在该领域中&#xff0c…

基于webpack的react脚手架

一、前言&#xff1a;react的cli开发模式太过于简单&#xff0c;好多东西都要自己配置 二、这里有个简单的配置&#xff0c;可以直接上手开发(不熟悉webpack和npm的绕路)&#xff0c;已经完成的配置如下 1&#xff1a;默认ejs模板 2&#xff1a;编译less、scss 3&#xff1…

不要错过使用jOOλ或jOOQ编写Java 8 SQL单行代码的机会

越来越多的人通过为他们的业务采用功能性编程来赶上我们平台的最新更新。 在Data Geekery &#xff0c;我们将Java 8用于jOOQ集成测试&#xff0c;因为将新的Streams API与lambda表达式一起使用使生成临时测试数据变得非常容易。 但是&#xff0c; 我们并不认为JDK提供了尽可…

node实现简单的群体聊天工具

一、使用的node模块 1、express当做服务器 2、socket.io 前后通信的桥梁 3、opn默认打开浏览器的模块(本质上用不到) 难点&#xff1a;前后通信 源码地址&#xff1a;https://github.com/wjf444128852/SimpleChat 欢迎clone并运行、扩展改进、issues 二、基础样子&#…

使用Spring Security的多租户应用程序的无状态会话

从前&#xff0c; 我发表了一篇文章&#xff0c;解释了构建无状态会话的原理 。 巧合的是&#xff0c;我们再次针对多租户应用程序执行同一任务。 这次&#xff0c;我们将解决方案集成到Spring Security框架中&#xff0c;而不是自己构建身份验证机制。 本文将解释我们的方法和…

What?一个 Dubbo 服务启动要两个小时!

前言 前几天在测试环境碰到一个非常奇怪的与 dubbo 相关的问题&#xff0c;事后我在网上搜索了一圈并没有发现类似的帖子或文章&#xff0c;于是便有了这篇。 希望对还未碰到或正在碰到的朋友有所帮助。 现象 现象是这样的&#xff0c;有一天测试在测试环境重新部署一个 dubbo …

使用Project Lombok减少Java应用程序中的样板代码

对Java编程语言最常提出的批评之一是它需要大量的样板代码 。 对于简单的类尤其如此&#xff0c;该类只需要存储一些值就可以。 您需要这些值的getter和setter&#xff0c;也许您还需要一个构造函数&#xff0c;覆盖equals&#xff08;&#xff09;和 hashcode&#xff08;&am…

十六、CI框架之数据库操作get用法

一、使用数据库的Get方法读取内容&#xff0c;如下代码&#xff1a; 二、数据库如下&#xff1a; 二、效果如下&#xff1a; 转载于:https://www.cnblogs.com/tianpan2019/p/11141809.html

WCF系列(二) -- 使用配置文件构建和使用WCF服务

当然&#xff0c;配置一个ServiceHost除了上面说的完全使用代码的方式&#xff0c;更好的方式是使用配置文件&#xff0c;把一些可能需要修改的属性跟代码分离&#xff0c;放到配置文件中&#xff0c;这样可以提供服务配置的灵活性&#xff0c;也更容易维护。 看看前面那个不用…

如何使用github搭建个人博客

1、去github官网注册个人帐号&#xff1a;没有的&#xff1a;猛戳这里去注册&#xff0c;比如我的账户名&#xff1a;wjf444128852&#xff0c;我的已经汉化(可在github里搜索github如何汉化有插件) 2、点击仓库-新建&#xff0c;仓库名字必须是&#xff1a;你的github帐号.git…

Spring Boot和Spring Data REST –通过REST公开存储库

使用Spring Boot和Spring Data REST&#xff0c;通过REST公开Spring Data存储库非常容易。 使用最少的代码&#xff0c;您可以创建遵循HATEOAS原理的JPA实体的REST表示。 我决定重用Spring PetClinic的JPA实体&#xff08;业务层&#xff09;作为本文的基础。 应用基础 PetCli…

jQuery Ajax – Servlets集成:构建完整的应用程序

网上有很多教程&#xff0c;它们解释了有关使用servlet和JSP页面进行Java Web开发的一些知识&#xff0c;但是&#xff0c;我从来没有找到对于初学者来说足够简洁&#xff0c;简单的教程。 这样的教程应该解释创建一个简单的Web应用程序的整个过程&#xff0c;包括前端&#xf…

信息系统开发平台OpenExpressApp - 应用模型ApplicationModel

下图为OpenExpressApp的系统架构图&#xff0c;其中在应用模型是作为一种元数据贯穿于整个架构&#xff0c;应用模型运行在OpenExpressApp框架之上。应用模型是OEA的核心&#xff0c;理解好应用模型才能更好的使用OEA。 应用模型贯穿于整个架构层 模型关注what OEA希望从重复的…