jQuery中outerWidth()方法用法实例
更新时间：2015年01月19日 09:19:34 投稿：shichen2014
这篇文章主要介绍了jQuery中outerWidth()方法用法,实例分析了outerWidth()方法的功能、定义及获取第一个匹配元素外部宽度的使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中outerWidth()方法用法。分享给大家供大家参考。具体分析如下：
此方法获取第一个匹配元素外部宽度。
默认情况下外部高度是宽度(width)、内补白(padding)和边框(border)之和。
如果参数设置为true的话，外补白(margin)尺寸也会算入外部宽度。
此方法对可见和隐藏元素均有效。
可以与outerHeight()方法结合学习。
语法结构:
复制代码 代码如下:
$(selector).outerWidth(options)
参数列表:
实例代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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/
相关文章
使用jquery给input和textarea设定ie中的focus
在浏览网站的过程中，我们经常可以看见当鼠标点击后样式改变的文本框和文本域,那么这种效果是如何实现的呢?2008-05-05
经常会用到jquery.ui.tabs标签，如我们可以把备份管理放在一个页面上，而该页面有两个tab分别为备份和还原，但这样会现在这个页面臃肿2010-02-02
jquery中常用的SET和GET$(”#msg”).html循环介绍
jquery中常用的SET和GET$(”#msg”).html循环想必大家并不陌生吧，本文整理了一些，感兴趣的朋友可以参考下2013-10-10
这篇文章主要为大家详细介绍了简单实现jQuery进度条轮播实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要给大家详细介绍了jQuery.each使用方法及源码分析的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了jQuery中:reset选择器用法,实例分析了:reset选择器的功能、定义及匹配重置按钮的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery实现自动输入email、时间和域名的方法,涉及jQuery表单操作的相关技巧,需要的朋友可以参考下2016-08-08
下面写关于如何把无刷新的数据写入到数据库中,需要的朋友可以参考下2012-12-12
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionWidgets实现的AngularGauge图效果,结合具体实例形式分析了jQuery使用FusionWidgets插件载入xml数据实现AngularGauge图的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery替换textarea中换行的方法,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下2015-06-06
最新评论