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 $.ajax入门应用二
Nov 19 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
js常用代码段整理
Nov 30 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue prop传值类型检验方式
Jul 30 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
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python中正则的使用指南
2016/12/04 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
python实现发送邮件功能代码
2017/12/14 Python
python实现爬取图书封面
2018/07/05 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
基于python操作ES实例详解
2019/11/16 Python
python 动态绘制爱心的示例
2020/09/27 Python
五一家具促销方案
2014/01/10 职场文书
美术专业个人自我评价
2014/01/18 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
小学教师师德承诺书
2014/05/23 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
建议书的格式及范文
2015/09/14 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python