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版)
Nov 19 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Vue父子组件传值的一些坑
Sep 16 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开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
PyCharm 常用快捷键和设置方法
2017/12/20 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python tkinter组件使用详解
2019/09/16 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
纪念一二九运动演讲稿
2014/09/16 职场文书
见义勇为事迹材料
2014/12/24 职场文书
党员个人自我评价
2015/03/03 职场文书
电力工程合作意向书
2015/05/11 职场文书
从事会计工作年限证明
2015/06/23 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏