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 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
微信小程序框架的页面布局代码
Aug 17 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Python常用内置函数总结
2015/02/08 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
某公司面试题
2012/03/05 面试题
幼儿园元旦亲子活动方案
2014/02/17 职场文书
协议书范本
2014/04/23 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
暑假打工感想
2015/08/07 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers