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 相关文章推荐
jquery 插件学习(四)
Aug 06 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue生命周期的探索
2019/04/03 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python开发之文件操作用法实例
2015/11/13 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python数据类型之List列表实例详解
2019/05/08 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
小学教师师德承诺书
2014/05/23 职场文书
新党章心得体会
2014/09/04 职场文书
2014年科室工作总结
2014/11/20 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
Python 统计序列中元素的出现频度
2022/04/26 Python