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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
常用的js方法合集
Mar 10 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 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 function用法如何递归及return和echo区别
2014/03/07 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
js中的string.format函数代码
2020/08/11 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Flask之flask-session的具体使用
2018/07/26 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
演讲开头怎么书写?
2019/08/06 职场文书