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 相关文章推荐
倒记时60刷新网页的js代码
Feb 18 Javascript
javascript继承机制实例详解
Nov 20 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
js实现3D图片展示效果
Mar 09 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Vue项目服务器部署之子目录部署方法
May 12 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
微信小程序用户授权最佳实践指南
May 08 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上传、管理照片示例
2006/10/09 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
Stop SQL Server
2007/06/21 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python 项目转化为so文件实例
2019/12/23 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
QML用PathView实现轮播图
2020/06/03 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
python实现人工蜂群算法
2020/09/18 Python
CSS3 简写animation
2012/05/10 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
运动会广播稿60字
2014/01/15 职场文书
家长会邀请书
2014/01/25 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL