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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
axios post提交formdata的实例
Mar 16 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
vue.js实现双击放大预览功能
Jun 23 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 之Section与Cookie使用总结
2012/09/14 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript 基本概念
2015/01/20 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
活动总结怎么写啊
2014/05/07 职场文书
爱护公物标语
2014/06/24 职场文书
闪闪的红星观后感
2015/06/08 职场文书
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers