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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 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 注释规范
2012/03/29 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python实现简单名片管理系统
2018/11/30 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python文字转语音的实例代码分析
2019/11/12 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
详解Django中异步任务之django-celery
2020/11/05 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
迎接领导欢迎词
2014/01/11 职场文书
酒吧创业计划书
2014/01/18 职场文书
夜不归宿检讨书
2014/02/25 职场文书
娱乐节目策划方案
2014/06/10 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
同学聚会通知书
2015/04/20 职场文书
详解MySQL集群搭建
2021/05/26 MySQL