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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
小程序自定义轮播图圆点组件
Jun 25 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 Document 代码注释规范
2009/04/13 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python能做什么
2020/06/02 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
文化建设工作方案
2014/05/12 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
考研导师推荐信范文
2015/03/27 职场文书
单位综合评价意见
2015/06/05 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL