javaScript和jQuery中的快捷尺寸

一、javaScript的快捷的尺寸

1.1 clientWidth 和 clientHeight 值：包含的是 content + padding区域

dom结构：

1 div { 2 width: 200px; 3 height: 200px; 4 border: 10px solid #000; 5 background-color: orange; 6 padding: 16px; 7 margin: 20px; }

执行代码：

1 // 获得元素对象 2 var div = document.getElementById('box'); 3 4 // 获得尺寸 5 console.log(div.clientWidth, div.clientHeight);

结果：

1.2 offsetWidth 和 offsetHeight 值 = content + padding + border dom结构：

1 div { 2 width: 200px; 3 height: 200px; 4 border: 15px solid #000; 5 background-color: orange; 6 padding: 16px; 7 margin: 20px; }

执行代码：

1 // 获得元素对象 2 var div = document.getElementById('box'); 3 // 获得尺寸 4 console.log(div.offsetWidth, div.offsetHeight);

结果：

1.3 clientLeft 和 clientTop clientLeft: 左边框的宽度 clientTop: 上边框的宽度 dom结构：

1 div { 2 width: 200px; 3 height: 200px; 4 border: 15px solid #000; 5 background-color: orange; 6 padding: 16px; 7 margin: 20px; 8 position: relative; 9 left: 10px; 10 top: 30px; 11 border-left: 40px solid red; 12 border-top: 55px solid blue; }

执行代码：

1 // 获得元素对象 2 var div = document.getElementById('box'); 3 // 获得尺寸 4 console.log(div.clientLeft, div.clientTop);

结果：

1.4 定位元素 offsetParent获得定位的父元素,定位父元素不一定是parentNode

dom结构：

<div id="carousel"> <div id="unit"> <div id="box"></div> </div> </div>

样式：

1 #carousel { 2 position: relative; 3 width: 200px; 4 height: 200px; 5 border: 1px solid red; 6 margin: 0 auto; 7 } 8 #box { 9 position: absolute; 10 left: 20px; 11 top: 30px; 12 width: 50px; 13 height: 50px; 14 background-color: orange; }

执行代码：

1 <script> 2 // 获得box元素 3 var box = document.getElementById('box'); 4 5 // 获得定位的父元素 6 console.log(box.offsetParent); 7 console.log(box.parentNode);

结果：

1.5 offsetLeft和offsetTop 获得定位的相关信息: left 和 top 结构：

执行代码： 1 // 获得定位的相关信息 2 console.log(box.offsetLeft, box.offsetTop); 结果：

结论： 高级浏览器在计算left和top值的时候，不会将边框计算在内。但是有一些IE的版本会将border计算在内。

二， jquery的快捷尺寸

盒模型：

2.1 Width（）和 height（） 值= 内容content区域

2.2 innerWidth和innerHeight 值=Content+padding区域

2.3 outerWidth和outerHeight 默认值为false（值=Content+padding+border区域）

参数设置为true（值=content + padding + border + margin区域）

执行代码：

1 // 获得元素 2 var $box = $('#box'); 3 /* 4 width和height： content 5 width:元素的宽度 6 height:元素的高度 7 8 */ 9 console.log($box.width(), $box.height()); 10 /* 11 innerHeight和innerWidth： content + padding 12 */ 13 console.log($box.innerWidth(), $box.innerHeight()); 14 /* 15 outerWidth（false）和outerHeight（false） 默认值为false 16 false:content + padding + border 17 true:content + padding + border + margin 18 */ 19 console.log($box.outerWidth(), $box.outerHeight()); 20 21 console.log($box.outerWidth(true), $box.outerHeight(true));

结果：

结论： width和height： content innerHeight和innerWidth： content + padding outerWidth（false）和outerHeight（false） 默认值为false false:content + padding + border true:content + padding + border + margin

2.4 jquery中的相关定位 使用方式： $(“dom“).position()返回值是一个对象，对象包含left值和top值。 结构：

执行代码：

1 // 获得定位信息 2 console.log($('#box').position());

结果：

2.5 获得元素到页面之间的距离 结构：

执行代码：

1 // 获得box到页面的距离 2 console.log($('#box').offset());

结果：