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(function(){
  var txt="";
  txt+="Width of div: " + $("#div1").width() + "</br>";
  txt+="Height of div: " + $("#div1").height() + "</br>";
  txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
 });
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
</div>
<br>
<button>Display dimensions of div</button>
<p>outerWidth(true) - returns the width of an element (includes padding, border, and margin).</p>
<p>outerHeight(true) - returns the height of an element (includes padding, border, and margin).</p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • CSS的margin边界叠加深度剖析图文演示

    CSS的margin边界叠加深度剖析图文演示

    边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: 元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: 元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿奇怪,但是边界甚至可

  • firefox margin-top失效的原因与解决办法

    为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少. 现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理.不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁. 在这个说明中,"collapsing margins"(折叠margin)的意思是

  • 简单谈谈margin负值的作用

    简单谈谈margin负值的作用

    1.有俩个边框,有不同的背景色,不管哪边高增加,另一边也变高 2.实现自适应

  • Android中gravity、layout_gravity、padding、margin的区别小结

    1.gravity与layout_gravity的区别 gravity 属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置．该属性就干了这个． layout_gravity 是用来设置该view相对与起父view 的位置．比如一个button 在linearlayout里,你想把该button放在靠左 靠右等位置就可以通过该属性设置． 这样就解释了,有什么我们弄个最外布局,然后里面包了几个布局,如果要使这几个布局都靠底,就可

  • 关于margin-left的示例代码

    关于margin-left的示例代码

    刚找到一个不错的东东 body { margin: 36pt 24pt 36pt; }  body { margin: 11.5%; }  body { margin: 10% 10% 10% 10%; } #idParentDiv{width:100%;padding:6px;background-color:buttonshadow;} #idDiv{width:400px;height:80px;background-color:#FFD700;padding:6px;} #idCodeD

  • 用margin和overflow属性实现div间距的方法

    用margin和overflow属性实现div间距的方法

    通常我们在制作上图的时候,会分别给四个div加上不同的css属性,来实现中间间隔.但我们更希望的是不需要对html标签做标识,直接能通过css实现,今天在论坛上小志提出了一个很不错的解决方案.使用overflow:hidden属性.或许很多人已经是这样用了,我没用过,觉得耳目一新.呵呵.其实道理很简单,我们按照正常的设置li的margin-right.margin-bottom属性,这样的结果自然会比我们期望的要多出来右边和下方的,这个时候我们通过ul的父级来设置width/height属性,然

  • 各浏览器padding、margin的差异

    各浏览器padding、margin的差异

    margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE 6.0 Firefox Opera等是真实宽度=width+padding+border+marginIE5.X真实宽度=width-padding-border-margin 解决的方法是: div.content { width:400px; //这个是错误的width,所有浏览器都读到了voice-family: "\"}\""; //IE5.X/wi

  • 用iframe margin实现调用其他网页的某一区域的方法

    逛网中发现,用iframe的margin函数实现调用一网页的部分区域,太有才了,以后就方便了 新建网页 body{ } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 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 Validate表单验证插件的基本使用方法及功能拓展

    jQuery Validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示            2.鼠标离开表单项时,开始校验元素             3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数:

  • jQuery动态改变多行文本框高度的方法

    jQuery动态改变多行文本框高度的方法

    本文实例讲述了jQuery动态改变多行文本框高度的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框高度变化</title> <style type="text/css"> * { margin: 0

  • jQuery实现浮动层随浏览器滚动条滚动的方法

    jQuery实现浮动层随浏览器滚动条滚动的方法

    本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • jquery实现简单合拢与展开网页面板的方法

    jquery实现简单合拢与展开网页面板的方法

    本文实例讲述了jquery实现简单合拢与展开网页面板的方法.分享给大家供大家参考.具体如下: 这是一款网页上常见的合拢(收缩).伸展面板代码,使用了jQuery插件,代码更加简化,点击面板的标题栏即可折叠.或展开这个层,是网上很流行的效果,由此可扩展出的功能还真挺多,只要动脑筋,一定能做出来. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/ 具体代码如下: <!

  • jQuery通过写入cookie实现更换网页背景的方法

    本文实例讲述了jQuery通过写入cookie实现更换网页背景的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 判断数组是否包含某个元素的js函数实现方法

    判断数组是否包含某个元素的js函数实现方法 Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this[i] === obj) { return true; } } return false; } 或 Array.prototype.contains = function(element) { for (var i = 0; i < this.length; i++) { if (t

  • jquery实现页面百叶窗走马灯式翻滚显示效果的方法

    本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 复制代码 代码如下: jQuery.fn.extend((     function($){         var l = 4,//卷动行数             t=5000,//卷动完一次后,隔多长时间下次开始卷动             rt=500,//每个n卷动过去的耗时             n="li",

  • jquery实现鼠标滑过显示提示框的方法

    jquery实现鼠标滑过显示提示框的方法

    本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

随机推荐