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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue组件系列之TagsInput详解
May 14 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和.net中des加解密的实现方法
2013/02/27 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
Vue实现简易计算器
2020/02/25 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
vue实现购物车的监听
2020/04/20 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python中对list去重的多种方法
2014/09/18 Python
Python命令行解析模块详解
2018/02/01 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
python 模拟登陆163邮箱
2020/12/15 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
比较基础的php面试题及答案-编程题
2012/10/14 面试题
审核会计岗位职责
2013/11/08 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
投资建议书模板
2014/05/12 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
计算机实训报告范文
2014/11/05 职场文书
中标通知书格式
2015/04/17 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Java中的随机数Random
2022/03/17 Java/Android