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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue微信分享插件使用方法详解
Feb 18 Javascript
JavaScript实现图片放大预览效果
Nov 02 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python+django实现文件下载
2016/01/17 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
通过cmd进入python的实例操作
2019/06/26 Python
django框架创建应用操作示例
2019/09/26 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
自荐书模板
2013/12/19 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
采购求职信
2014/03/17 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
群众路线领导对照材料
2014/08/23 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers