一、快捷尺寸
1.1 clientWidth clientHeight
样式：
1 #box { 2 float: left; 3 padding: 10px; 4 background-color: red; 5 border: 10px solid blue; 6 } |
1 |
输出clientWidth和clientHeight:
1 |
总结：
clientWidth和clientHeight包含的是：content + padding区域
1.2 offsetWidth offsetHeight
样式：
1 #box { 2 float: left; 3 padding: 10px; 4 background-color: red; 5 border: 10px solid blue; 6 } |
1 |
输出offsetWidth 和 offsetHeight:
1 |
总结：
offsetWidth 和 offsetHeight包含的是： content + padding + border 区域
1.3 clinetLeft clientTop
clientLeft: 左边框的宽度
clientTop: 上边宽的宽度
样式：
1 #box { 2 float: left; 3 padding: 10px; 4 background-color: red; 5 border: 10px solid blue; 6 border-left-width: 20px; 7 } |
1 |
1.4 jquery中快捷尺寸
样式：
1 #box { 2 float: left; 3 padding: 10px; 4 background-color: red; 5 border: 10px solid blue; 6 border-left-width: 20px; 7 margin: 20px; 8 } |
显示：
1 |
content:
1 // content 2 console.log("content宽是:" + $box.width()); 3 console.log("content高是:" + $box.height()); |
content + padding:
1 // content + padding 2 console.log("innerWidth:" + $box.innerWidth()); 3 console.log("innerHeight:" + $box.innerHeight()); |
content + padding + border:
1 // content + padding + border 2 console.log("outerWidth:" + $box.outerWidth()); 3 console.log("outerHeight:" + $box.outerHeight()); |
content + padding + border + margin:
1 // content + padding + border + margin 2 console.log("outerWidth(true):" + $box.outerWidth(true)); 3 console.log("outerHeight(true):" + $box.outerHeight(true)); |
二、元素的位置和距离
2.1 定位父元素
子绝父相中的“父”
该元素不一定是父节点中的parentNode
DOM结构：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 #box { 12 position: relative; 13 width: 500px; 14 height: 500px; 15 margin: 0 auto; 16 background-color: red; 17 } 18 #box1 { 19 width: 250px; 20 height: 250px; 21 margin: 0 auto; 22 background-color: blue; 23 } 24 #box2 { 25 position: absolute; 26 width: 200px; 27 height: 200px; 28 left: 100px; 29 top: 100px; 30 background-color: orange; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="box"> 36 <div id="box1"> 37 <div id="box2"></div> 38 </div> 39 </div> 40 <!-- 此时box2是相对于box进行定位，在节点关系中box2的parentNode才是box1 --> 41 </body> 42 </html> |
此时box2相对于box进行定位
如何通过box2得到定位父元素呢？
1 console.log(box2.offsetParent); |
结果：
1 |
2.2 定位值
元素的定位值也是经常要获取的值， 所以dom也提供了相应的属性来获取
快速获取元素的定位值的方式：offsetLeft offsetTop
举例：
1 2 // 获取box2的定位值 3 console.log("距离自己定位父元素的左边距离是:" + box2.offsetLeft); // 距离自己定位父元素的左边距离 4 console.log("距离自己定位父元素的上边距离是:" + box2.offsetTop); // 距离自己定位父元素上边的距离 5 |
结果：
1 |
该属性存在兼容性问题：
在高级浏览器中： 是从子元素的边框外到父元素的边框内
在IE中： 是从子元素的边框外到父元素的边框外 也就是说多算了一条父元素的边框
在IE中输出定位值：
1 |
2.3 jquery中的定位值
使用方式：
$(dom).position() 返回值是一个对象， 对象中包含left就是dom的定位left 值 同时包含top就是dom的定位top值
执行代码:
1 // 获取box2的定位值 2 var $box_position = $("#box2").position(); 3 console.log($box_position); 4 |
输出结果：
1 |
三、获取一个元素到页面的距离
1 2 function offset(dom) { 3 /* 4 思路: 5 获取元素的定位父元素，再获取距离 6 再获取元素的定位父元素的定位父元素， 再获取距离 7 再获取元素的定位父元素的定位父元素的定位父元素， 直到终点 => body元素 距离相累加 8 */ 9 // for (, dom != document.body; dom = dom.offsetPatent) 10 11 // 获取浏览器的信息 12 var str = window.navigator.userAgent; 13 // 定义变量简化书写 14 var isIE8 = null; 15 // 检测浏览器信息 16 if (str.indexOf("MSIE 8.0") === -1) { 17 // console.log("不是IE8"); 18 isIE8 = false; 19 } else { 20 // console.log("是IE8"); 21 isIE8 = true; 22 } 23 24 // 定义对象 25 // 一开始不应该加上自己的边框， 26 var result = { 27 top: dom.offsetLeft, 28 left: dom.offsetTop 29 } 30 31 // 使用while循环 32 while (dom != document.body) { 33 // console.log(dom); 34 dom = dom.offsetParent; 35 36 // 判断是不是IE8 37 if (isIE8) { 38 // 说明是IE8 不需要加上父元素的边框了 39 result.left += dom.offsetLeft; 40 result.top += dom.offsetTop; 41 } else { 42 // 说明不是IE8 需要额外加上复元素的边框 43 result.left += dom.offsetLeft + dom.clientLeft; 44 result.top += dom.offsetTop + dom.clientTop; 45 } 46 47 } 48 // 返回对象 49 return result; 50 } |
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
从小白到就业，我们全权负责！
爱创课堂 言行一致、从不忽悠！
请把自己放心的交给我们吧！
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信：haomei0452，领取 前端资料、学费优惠 ！
