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中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
ES6中的类(Class)示例详解
Dec 09 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获取MySql新增记录ID值的3种方法
2014/06/24 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
js获取height和width的方法说明
2013/01/06 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python文件和目录操作函数小结
2014/07/11 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
办公室主任先进事迹
2014/01/18 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
银行求职信模板
2015/03/20 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
解决mysql的int型主键自增问题
2021/07/15 MySQL