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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
vue实现五子棋游戏
May 28 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Javascript之datagrid查询详解
Sep 15 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
基于mysql的论坛(2)
2006/10/09 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
mpvue跳转页面及注意事项
2018/08/03 Javascript
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
结婚周年感言
2014/02/24 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
办公室管理规章制度
2015/08/04 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android