jQuery中outerWidth()方法用法实例

本文实例讲述了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="http://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/

赞 (0)

相关推荐

  • jQuery获得包含margin的outerWidth和outerHeight的方法

    本文实例讲述了jQuery获得包含margin的outerWidth和outerHeight的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(fun

  • jQuery获得document和window对象宽度和高度的方法

    本文实例讲述了jQuery获得document和window对象宽度和高度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){

  • jQuery设置指定网页元素宽度和高度的方法

    本文实例讲述了jQuery设置指定网页元素宽度和高度的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("

  • jQuery中的height innerHeight outerHeight区别示例介绍

    标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距 html代码: 复制代码 代码如下: <div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj<

  • jQuery中outerHeight()方法用法实例

    本文实例讲述了jQuery中outerHeight()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部高度. 默认情况下外部高度是高度(height).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerWidth()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerHeight(options) 参数列表: 参

  • Jquery实现鼠标移动放大图片功能实例

    Jquery实现鼠标移动放大图片功能实例

    本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一会就把自己搞糊涂了,使用jquery技术直接根据标签的id,class等等,就可以辨识出来触发条件,直接作出回应(百度百科上说这是jquery很大的一

  • jQuery帮助之CSS尺寸(五)outerHeight、outerWidth

    以便更好控制元素来满足我们的要求,那么我们可以通过outerHeight(options)和outerWidth(options)来获取到这部分的高度和宽度. outerHeight(options) 获取第一个匹配元素外部高度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. 返回值:Integer 参数: options(Boolean) : (false) 设置为 true 时,计算边距在内. 示例: 获取第一段落外部高度. HTML 代码: <p>Hello</p>&

  • Jquery 的outerHeight方法使用介绍

    获取第一个匹配元素外部高度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. outerHeight(options) optionsBoolean默认值:'false' 设置为 true 时,计算边距在内. 描述: 获取第一段落外部高度. HTML 代码: 复制代码 代码如下: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: 复制代码 代码如下: var p = $("p:first");

  • jQuery中outerWidth()方法用法实例

    本文实例讲述了jQuery中outerWidth()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部宽度. 默认情况下外部高度是宽度(width).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerHeight()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerWidth(options) 参数列表: 参数

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery中scrollLeft()方法用法实例

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

  • jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

  • jQuery中offset()方法用法实例

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

随机推荐