jQuery获得包含margin的outerWidth和outerHeight的方法
更新时间：2015年03月25日 16:13:16 作者：上大王
这篇文章主要介绍了jQuery获得包含margin的outerWidth和outerHeight的方法,涉及jQuery中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程序设计有所帮助。
相关文章
这篇文章主要介绍了jquery实现横向图片轮播特效代码，效果很精致，实现方法很简单，特推荐给大家，希望大家可以喜欢。2015-11-11
这篇文章主要介绍了jQuery实现可用于博客的动态滑动菜单代码,可实现jQuery基于鼠标事件动态操作页面元素变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
jQuery事件绑定on()、bind()与delegate() 方法详解
这篇文章主要详细介绍了jQuery事件绑定的三种方法，分别是on()、bind()与delegate()，十分的浅显易懂，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要介绍了jQuery select自动选中功能,结合实例形式分析了jQuery实现select响应与级联菜单显示相关功能与操作技巧,需要的朋友可以参考下2016-11-11
近期有项目需求是这样的，需要根据用户选择的选项给出相应的提示，本文给大家介绍基于jQuery实现复选框是否选中进行答题提示，对jquery复选框是否选中相关知识感兴趣的朋友一起看看吧2015-12-12
有关文处理本有关的问题WEB开发经常会用到，这里结合使用情况总结一下，同时还有jQuery求对象的高度问题，下面为大家本别讲解下2013-08-08
Jquery对新插入的节点 绑定Click事件失效的解决方法
下面小编就为大家带来一篇Jquery对新插入的节点 绑定Click事件失效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JQuery UI是JQuery官方支持的WebUI 代码库，包含底层交互、动画、特效等API，并且封装了一些Web小部件（Widget）。同时，JQuery UI继承了jquery的插件支持，有大量的第三方插件可以丰富JQuery UI的功能2012-03-03
这篇文章主要介绍了JQuery Ajax跨域调用和非跨域调用问题,结合具体实例形式分析了jQuery基于ajax的非跨域请求及跨域请求相关实现技巧与操作注意事项,需要的朋友可以参考下2019-04-04
jQuery的hover事件只是针对单个HTML元素，不过，有些时候我们希望当鼠标进入两个或多个元素时触发fun1，离开他们时触发fun2，而在这些元素间移动鼠标并不触发任何事件2014-06-06
最新评论