jQuery中outerWidth()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中outerWidth()方法用法。分享给大家供大家参考。具体分析如下:

此方法获取第一个匹配元素外部宽度。
默认情况下外部高度是宽度(width)、内补白(padding)和边框(border)之和。
如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度。
此方法对可见和隐藏元素均有效。
可以与outerHeight()方法结合学习。

语法结构:

$(selector).outerWidth(options)

参数列表:
参数 描述
options 定义是否把外补白(margin)计算在内: 一.fase,外补白不计算在内,默认值。 二.true,外补白计算在内。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>outerWidth()函数-三水点靠木</title>

<style type="text/css">

div{

  background-color:green;

  height:100px;

  width:200px;

  padding:10px;

  margin:10px;

  border:5px solid red;

}   

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").text($("div").outerWidth(true))

  })

})

</script>

</head>

<body>

  <div>此处显outerWidth()数值</div>

  <button>点击查看div的outerWidth</button>

</body>

</html>

点击按钮可以显示div的元素外部宽度。

希望本文所述对大家的jQuery程序设计有所帮助。

本文转自:蚂蚁部落http://www.softwhy.com/

Javascript 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
javascript数据类型示例分享
Jan 19 #Javascript
jQuery中outerHeight()方法用法实例
Jan 19 #Javascript
jQuery中innerWidth()方法用法实例
Jan 19 #Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 #Javascript
jQuery中innerHeight()方法用法实例
Jan 19 #Javascript
Javascript基础教程之函数对象和属性
Jan 18 #Javascript
Javascript基础教程之argument 详解
Jan 18 #Javascript
You might like
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Vue header组件开发详解
2018/01/26 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python语法分析之字符串格式化
2019/06/13 Python
简单了解python PEP的一些知识
2019/07/13 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python魔术方法专题
2020/06/19 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
粗加工管理制度
2014/02/04 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
优秀党员先进材料
2014/12/18 职场文书
企业介绍信范文
2015/01/30 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
军训结束新闻稿
2015/07/17 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers