jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
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.
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别的更多相关文章
- [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
转自:http://www.cnblogs.com/keyi/p/5933981.html jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...
- jquery中innerwidth,outerwidth,outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- jQuery中的height()、innerheight()、outerheight()的区别总结
在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...
- jQuery中attr()、prop()、data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- jquery中的$("#id")与document.getElementById("id")的区别
以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...
- jquery 中的 $("#id") 与 document.getElementById("id") 的区别
以前没注意过,认为jquery 中的 $("#air") 与 document.getElementById("air") 是一回事,指的是同一个东西.在今天写 ...
随机推荐
- elasticsearch 基础知识汇总
索引分片: 从策略层面,控制分片分配的选择 磁盘限额 为了保护节点数据安全,ES 会定时(cluster.info.update.interval,默认 30 秒)检查一下各节点的数据目录磁盘使用情况 ...
- HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Eclipse中java文件和jsp字体大小设置
1.更改java文件大小设置Window->preferences->General->Appearance->Colors and Fonts->Java-&g ...
- springboot - SqlSessionFactoryBean falls in circular dependencies by Spring Boot's DataSourceInitializer
springboot mybatis配置多数据源的时候,报错:There is a circular dependency between 7 beans in the application con ...
- ansible进阶小技巧--tags
用ansible写playbook的朋友可能会发现,当配置工作很多时,如果在中间过程出错了,修改后想重新执行,前面的一大堆步骤让人感觉很烦躁.虽然提供了“retry”文件,但是却只是根据host来判断 ...
- Session的常用场景
session :存储浏览器sessionID值保存在客户端,sessionID的key:data 数据存储在服务器上 会话管理,用户登录验证,权限访问控制,购物车,临时数据.
- BIGDECIMAL 四舍五入等取舍问题
我输入的是1.35,但是电脑不可能取到整数,他的值如下:初始化数据:1.350000000000000088817841970012523233890533447265625ROUND_DOWN); ...
- VScode 安装必备
1.运行程序:
- java并发:Semaphore
Semaphore是常见的同步工具类之一. Semaphore翻译成字面意思为 信号量,Semaphore可以控制同时访问的线程个数,也称为permit(许可). 在构造函数中指定permits个数. ...
- python之用户登陆作业
实现一个用户登陆的小程序,如果密码错误,可以重试三次,如果三次均错误,则锁定 数据库如下格式,分别用户名|密码|锁定,其中锁定字段0为正常,1为被锁定 root|admin123|0 admin|ad ...