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_03_javascript全局观
Oct 11 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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强制下载PDF文件示例
2014/01/17 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
js下弹出窗口的变通
2007/04/18 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python笔记之观察者模式
2019/11/20 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
浅谈django channels 路由误导
2020/05/28 Python
英国著名书店:Foyles
2018/12/01 全球购物
高三自我鉴定范文
2013/10/19 职场文书
技术合作协议书范本
2014/04/18 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
gojs实现蚂蚁线动画效果
2022/02/18 Javascript