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 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
iview table高度动态设置方法
Mar 14 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
vue实现简单加法计算器
Oct 22 Javascript
vue实现列表拖拽排序的功能
Nov 02 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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Vue实现购物车功能
2017/04/27 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python脚本监控docker容器
2016/04/27 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
校园招聘策划书
2014/01/09 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
司机岗位职责范本
2015/04/10 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
解析MySQL索引的作用
2022/03/03 MySQL