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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
jquery ui对话框实例代码
May 10 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Node.js中看JavaScript的引用
2017/04/22 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python解析多层json操作示例
2019/12/30 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
什么是继承
2013/12/07 面试题
师恩难忘教学反思
2014/04/27 职场文书
文明班集体申报材料
2014/05/23 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年暑假生活总结
2015/07/13 职场文书
六年级作文之家庭作文
2019/12/12 职场文书