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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
VSCode搭建React Native环境
May 07 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
laravel学习教程之存取器
2016/07/30 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
python实现哈希表
2014/02/07 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
安全检查验收制度
2014/01/12 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
买卖合同协议书范本
2014/10/18 职场文书
调解书格式范本
2015/05/20 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis