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 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
详解Vue方法与事件
Mar 09 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
JavaScript 实现继承的几种方式
Feb 19 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP 字符串 小常识
2009/06/05 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python将string转换到float的实例方法
2019/07/29 Python
Python Subprocess模块原理及实例
2019/08/26 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
医生实习工作总结的自我评价
2013/09/27 职场文书
学校工作推荐信范文
2014/07/11 职场文书
党员演讲稿
2014/09/04 职场文书
授权委托书
2014/09/17 职场文书
公司租房协议书
2014/10/14 职场文书
汶川大地震感悟
2015/08/10 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers