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 相关文章推荐
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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/05/09 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python flask框架post接口调用示例
2019/07/03 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python新手学习装饰器
2020/06/04 Python
python如何修改文件时间属性
2021/02/05 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
教师绩效考核方案
2014/01/21 职场文书
致百米运动员广播稿
2014/01/29 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
班级活动总结格式
2014/08/30 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
群众路线专项整治方案
2014/10/27 职场文书
小学教研工作总结2015
2015/05/13 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python