jQuery中关于height,innerWidth与outerWidth的区别
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。 公式为height()+padding*2
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。 公式为height()+padding*2+边框*2
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。 公式为height()+padding*2+边框*2+margin*2
实际例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("div").html("innerHeight=" + $("div").innerHeight() + "<br />innerWidth=" + $("div").innerWidth());
$("div").html( $("div").html() + "<br />Height=" + $("div").height() + "<br />Width=" + $("div").width());
$("div").html( $("div").html() + "<br />outerHeight=" + $("div").outerHeight() + "<br />outerWidth=" + $("div").outerWidth());
$("div").html( $("div").html() + "<br />outerHeight(true)=" + $("div").outerHeight(true) + "<br />outerWidth(true)=" + $("div").outerWidth(true));
})
</script>
<style type="text/css">
div {
width:300px;
height:50px;
margin:50px;
padding:50px;
border:solid 50px red;
}
</style>
<title>demo</title>
</head>
<body>
<div style="border:solid 10px red;">box</div>
</body>
</html>
运行效果:
jQuery中关于height,innerWidth与outerWidth的区别的更多相关文章
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...
- jQuery中【width(),innerWidth(),outerWidth()】
这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...
- jQuery中的.height()、.innerHeight()和.outerHeight()
jQuery中的.height()..innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法.对应的宽度获取方法分别为.width()..innerWid ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- [转载]jQuery中的html，val，text区别
在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...
- jquery中$.get()提交和$.post()提交有区别
jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...
- jQuery中的height()、innerheight()、outerheight()的区别总结
在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...
随机推荐
- wininet异步InternetReadFile和超时相关问题
wininet是对socket的封装 主要流程为创建,连接,发送,接收,关闭几个过程 所以在回调函数InternetStatusCallback中可以检测到dwInternetStatus #defi ...
- JavaScript常用对象的方法和属性
---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...
- 用unity4.3发布WINDOWS STORE APP应用的方法
http://www.cnblogs.com/suxsho/ 原创,转载请声明 ============================================================ ...
- 论SCRM系统对传统行业的冲击
SCRM(Social Customer Relationship Management)顾名思义是社会型客户关系管理系统,这在当前的电子商务领域是一个创新的概念,由于社交媒体(Social Medi ...
- linux文件目录权限详解（20170101）
linux目录权限与文件权限是不同的,二者要相互配合,这是基础. 比如要读文件:目录至少要有x,文件至少要有r. 要写文件:目录至少要有x,文件至少要有rw. 要执行文件:目录至少要有x,文件至少要有 ...
- 关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- 【转载】Ansys中的阻尼
原文地址:http://www.cnblogs.com/ylhome/archive/2009/08/26/1554195.html ANSYS动力学分析中提供了各种的阻尼形式,这些阻尼在分析中是如何 ...
- a标签与click的关系
当点击浏览器a标签的时候,浏览器的默认机制如下: 1.触发a的click事件2.读取href属性的值3.如果是URI则跳转4.如果是javascript代码则执行该代码 下面我们一起来做一个实验: 我 ...
- Chapter 4: Troubleshoot and debug web applications
Prevent and troubleshoot runtime issues Troubleshooting performance, security and errors using perfo ...
- oracle 职业学习指引
风哥 它是阿里巴巴造出的概念.其本意是,在阿里巴巴的IT架构中,去掉IBM的小型机.Oracle数据库.EMC存储设备,代之以自己在开源软件基础上开发的系统. 思科.IBM.谷歌.高通.英特尔.苹果. ...