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() 方法 返回元素的宽度.高度(包括 ...
随机推荐
- centos上源码安装clang 3.8
之前想在centos系统上安装clang 3.6版本,由于yum上版本太低,想通过源码编译安装.按照网上说的源码安装步骤,下好llvm.clang.clang-tools-extra和compiler ...
- HDU1081：To The Max（最大子矩阵，线性DP）
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1081 自己真够垃圾的,明明做过一维的这种题,但遇到二维的这种题目,竟然不会了,我也是服了(ps:猪啊). ...
- Dora.Interception, 为.NET Core度身打造的AOP框架[3]：Interceptor的注册
在<不一样的Interceptor>中我们着重介绍了Dora.Interception中最为核心的对象Interceptor,以及定义Interceptor类型的一些约定.由于Interc ...
- 关于shared pool的深入探讨(二)【转载】
关于shared pool的深入探讨(二) 作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.co ...
- Java源码解释之Integer.bitCount
Java中的Integer.bitCount(i)的返回值是i的二进制表示中1的个数.源码如下: public static int bitCount(int i) { // HD, Figure 5 ...
- LeetCode：下一个更大元素I【31】
LeetCode:下一个更大元素I[31] 题目描述 给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的 ...
- BZOJ 3689: 异或之
字典树可以$o(logn)查找第k大$ 使用$可持久化Trie 区间查找第k大,然后首先把每个数异或之后的最小丢进小根堆中,然后一个一个取出,取出后就再丢次小,一共取k次$ 总的时间复杂度为$O(kl ...
- angularjs 的controller的三种写法
AngularJS 的controller其实就是一个方法,它有三种写法: 第一种: <pre name="code" class="javascript" ...
- libvirt-qemu-虚拟机设备热插拔
cpu热插拔 # virsh setvcpus $domain_name --count 4 --live (--config可写入配置文件永久保存) #前提条件和后续激活参考<libvirt- ...
- Runnable、Callable
Runnable 任务,没有返回值 Callable 任务,又返回值 Runnable与Callable 相同点: 1. 都是接口: 2. 用来编写多线程程序: 3. 都需要调用Thread.star ...