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 left,right,mid函数
Jun 10 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
如何判断图片地址是否失效
2007/02/02 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
如何用JavaScript定义一个类
2014/09/12 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
python 实现批量图片识别并翻译
2020/11/02 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
PHP面试题集
2016/12/18 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
毕业生找工作推荐信
2013/11/21 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
单位未婚证明范本
2014/11/25 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书