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


Posted in Javascript onMarch 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
微信小程序入门之指南针
Oct 22 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 #Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 #Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 #Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 #Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 #Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 #Javascript
JavaScript的事件代理和委托实例分析
Mar 25 #Javascript
You might like
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
js实现打字小游戏
2019/12/17 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
小区消防演习方案
2014/02/21 职场文书
房产转让协议书
2014/04/11 职场文书
派出所所长先进事迹
2014/05/19 职场文书
廉洁自律个人总结
2015/02/14 职场文书
小学六年级毕业感言
2015/07/30 职场文书
小数乘法教学反思
2016/02/22 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
OpenCV-Python实现油画效果的实例
2021/06/08 Python