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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
JavaScript基础之this详解
Jun 04 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JavaScript闭包的简单应用
Sep 01 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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操作xml
2013/10/27 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
jQuery自动添加表单项的方法
2015/07/13 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python aiohttp的使用详解
2019/06/20 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
教师求职信范文
2014/05/24 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Win2008系统搭建DHCP服务器
2022/06/25 Servers
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL