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中不支持静态Expando的元素的问题
Mar 08 Javascript
javascript json2 使用方法
Mar 16 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php实现评论回复删除功能
2017/05/23 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python动态加载包的方法小结
2016/04/18 Python
python如何修改装饰器中参数
2018/03/20 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python和JavaScript哪个容易上手
2020/06/23 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
Python脚本调试工具安装过程
2021/01/11 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
团工委书记自荐书范文
2013/12/17 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python