[转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
2024-08-23 00:33:11
转自:http://www.cnblogs.com/keyi/p/5933981.html
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
var a = 元素本身的宽度;
width() = a;
innerWidth() = a+padding;
outerWidth() = a+padding+border;
outerWidth(true) = a+padding+border+margin;
在jQuery中,
width()方法用于获得元素宽度;
innerWidth()方法用于获得包括内边界(padding)的元素宽度,
outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,
如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说:对于同一个元素应该是:
width()<=innerWidth()<=outerWidth()<=outerWidth(true); 举个例子:
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());
alert(obj.innerWidth());
alert(obj.outerWidth());
alert(obj.outerWidth(true));
});
});
</script>
<p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button> 输出的结果分别是 200px, 220px, 240px, 260px.
最新文章
- JavaScript模板引擎artTemplate.js——template()方法
- 基于C#在WPF中使用斑马打印机进行打印【转】
- Ubuntu disk error
- private、 protected、 public、 internal 修饰符
- ActiveReports 报表控件官方中文入门教程 (1)-安装、激活以及产品资源
- 利用百度地图API,获取经纬度坐标
- 01-06-01【Nhibernate (版本3.3.1.4000) 出入江湖】事务
- unity3d c# 产生真正的随机数
- 知识管理(KM) - 数据流
- 什么是 html 标签,html 实体
- CUDA5.5 的环境变量设置
- 海量数据处理 - 10亿个数中找出最大的10000个数(top K问题)
- web攻击之xss(一)
- Node.js中实现套接字服务
- day21_雷神_django第四天
- [matlab] 6.粒子群优化算法
- JavaScript 高级程序设计第二版
- hdu5439 二分
- Nordic SDK例程目录结构
- JVM内存结构(转)