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 function、指针及内置对象
Feb 19 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
原生javascript实现分页效果
Apr 21 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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搜索文件程序分享
2015/10/30 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
Vue编写多地区选择组件
2017/08/21 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
python版学生管理系统
2018/01/10 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python中的引用知识点总结
2019/05/20 Python
django实现用户注册实例讲解
2019/10/30 Python
浅谈Python中的继承
2020/06/19 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
C#如何进行LDAP用户校验
2012/11/21 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
七年级数学教学反思
2014/01/22 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
银行内勤岗位职责
2014/04/09 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
基于python的matplotlib制作双Y轴图
2021/04/20 Python
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技