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 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 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
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php实现头像上传预览功能
2017/04/27 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python实现网站的模拟登录
2016/01/04 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
团支书竞选演讲稿
2014/04/28 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
庆七一晚会主持词
2015/06/30 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
导游词之青岛崂山
2019/12/27 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电