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 Array.prototype.slice使用说明
Oct 11 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
三个python爬虫项目实例代码
2019/12/28 Python
python计算二维矩形IOU实例
2020/01/18 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
请假条格式范文
2014/04/10 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
医学求职自荐信
2014/06/21 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
高效课堂教学反思
2016/02/24 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
html粘性页脚的具体使用
2022/01/18 HTML / CSS