jQuery的width()、innerWidth()、outerWidth()方法
width():
不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。
innerWidth():
包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。
outerWidth():
包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。
<body>
<div class="box"></div>
</body>
<style>
.box{ width: 100px;height: 100px;background-color: red; }
</style>
<script>
$(function () {
//无边距
console.log("width",$(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//100px
console.log("outerWid",$(".box").outerWidth());//100px
//加padding 10px;
$(".box").css("padding", "10px");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//120px
//加border 5px
$(".box").css("border", "5px solid orange");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//130px
//加margin 10px
$(".box").css("margin", "10px");
console.log("width", $(".box").width());//100px
console.log("innerWid", $(".box").innerWidth());//120px
console.log("outerWid", $(".box").outerWidth());//130px
console.log("outerWid", $(".box").outerWidth(true));//150px
})
</script>
jQuery的width()、innerWidth()、outerWidth()方法的更多相关文章
- jQuery中【width(),innerWidth(),outerWidth()】
这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...
- jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery width(), innerWidth(), outerWidth() 区别
#div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...
- jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别
width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...
- innerWidth outerWidth
在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...
- width() 、 height() 方法；innerWidth() 、innerHeight() 方法；outerWidth() 、 outerHeight() 方法的区别
1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括 ...
随机推荐
- 枢轴点（Pivot Point）系统
Pivot Point是日内交易方法,非常简单实用,是一套非常“单纯”的阻力支持体系,大概是10年前一个做期货的高手发明的方法,至今已经广泛的用在股票.期货.国债.指数等高成交量的商品上.经典的Piv ...
- <context:annotation-config/> 的理解
转载:http://www.cnblogs.com/iuranus/archive/2012/07/19/2599084.html 当我们需要使用BeanPostProcessor时,直接在Sprin ...
- 一个用于实现并行执行的 Java actor 库
即使 Java 6 和 Java 7 中引入并发性更新,Java 语言仍然无法让并行编程变得特别容易.Java 线程.synchronized 代码块.wait/notify 和java.util.c ...
- SqlHelper简单实现（通过Expression和反射）1.引言
之前老大说要改变代码中充斥着各种Select的Sql语句字符串的情况,让我尝试着做一个简单的SqlHelper,要具有以下功能: 1.不要在业务代码中暴露DataTable或者DataSet类型: 2 ...
- linux java环境配置
一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i586.bin 这个是自解压的文件,在lin ...
- Django CRM 数据库增删改查
原文链接 http://www.cnblogs.com/yangmv/p/5327477.html
- html5 canvas js(时钟)
<!doctype html> <html> <head> <title>canvas</title> </head> < ...
- oracle 11 g数据库卸载(方法二)
1.开始->设置->控制面板->管理工具->服务 停止所有 Oracle服务. 2.开始->程序->Oracle - OraHome81->Oracle In ...
- 20162324 2016-2017-2《Java程序设计》课程总结
20162324 2016-2017-2<Java程序设计>课程总结 一.每周作业链接汇总 预备作业01 有关老师与学生关系的几个问题: 预备作业02 做中学: 预备作业03 实验楼学习: ...
- Eclipse使用Maven搭建Java Web项目并直接部署Tomcat
1.环境: Windows 10 Java 1.8 Maven 3.3.9 Eclipse IDE for Java EE Developers 2.准备: eclipse环境什么的不赘述,Maven ...