技术文章 | Technical articles

JavaScript进阶课堂笔记 第三天(上午)

一、快捷尺寸

1.1 clientWidth clientHeight

样式:

#box {

float: left;

padding: 10px;

background-color: red;

border: 10px solid blue;

}

 

图片1.png

输出clientWidthclientHeight:

图片2.png

总结:

clientWidthclientHeight包含的是:content + padding区域

 

1.2 offsetWidth offsetHeight

样式:

#box {

float: left;

padding: 10px;

background-color: red;

border: 10px solid blue;

}

 

图片3.png

 

输出offsetWidth offsetHeight:

图片4.png

 

总结:

offsetWidth offsetHeight包含的是: content + padding + border 区域

 

1.3 clinetLeft clientTop

  clientLeft: 左边框的宽度

clientTop: 上边宽的宽度

 

样式:

#box {

float: left;

padding: 10px;

background-color: red;

border: 10px solid blue;

border-left-width: 20px;

}

 

图片5.png

 

1.4 jquery中快捷尺寸

样式:

#box {

float: left;

padding: 10px;

background-color: red;

border: 10px solid blue;

border-left-width: 20px;

margin: 20px;

}

显示:

图片6.png

 

content:

// content

console.log("content宽是:" + $box.width());

console.log("content高是:" + $box.height());

图片7.png

 

content + padding:

// content + padding

console.log("innerWidth:" + $box.innerWidth());

console.log("innerHeight:" + $box.innerHeight());

图片8.png

 

content + padding + border:

 

// content + padding + border

console.log("outerWidth:" + $box.outerWidth());

console.log("outerHeight:" + $box.outerHeight());

图片9.png

 

content + padding + border + margin:

// content + padding + border + margin

console.log("outerWidth(true):" + $box.outerWidth(true));

console.log("outerHeight(true):" + $box.outerHeight(true));

图片10.png

 

二、元素的位置和距离

2.1 定位父元素

子绝父相中的“父”

该元素不一定是父节点中的parentNode

 

DOM结构:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

 * {

  margin: 0;

  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进行定位,在节点关系中box2parentNode才是box1 -->

41 </body>

42 </html>

 

此时box2相对于box进行定位

如何通过box2得到定位父元素呢?

console.log(box2.offsetParent);

 

结果:

图片11.png

 

2.2 定位值

元素的定位值也是经常要获取的值, 所以dom也提供了相应的属性来获取

快速获取元素的定位值的方式:offsetLeft   offsetTop

举例:

// 获取box2的定位值

console.log("距离自己定位父元素的左边距离是:" + box2.offsetLeft); // 距离自己定位父元素的左边距离

console.log("距离自己定位父元素的上边距离是:" + box2.offsetTop); // 距离自己定位父元素上边的距离

 

结果:

图片12.png

 

该属性存在兼容性问题:

在高级浏览器中: 是从子元素的边框外到父元素的边框内

IE中: 是从子元素的边框外到父元素的边框外 也就是说多算了一条父元素的边框

 

IE中输出定位值:

图片13.png

 

2.3 jquery中的定位值

使用方式:

$(dom).position() 返回值是一个对象, 对象中包含left就是dom的定位left 值 同时包含top就是dom的定位top

 

执行代码:

// 获取box2的定位值

var $box_position = $("#box2").position();

console.log($box_position);

 

输出结果:

图片14.png

 

三、获取一个元素到页面的距离

function offset(dom) {

/*

 思路:

  获取元素的定位父元素,再获取距离

  再获取元素的定位父元素的定位父元素, 再获取距离

  再获取元素的定位父元素的定位父元素的定位父元素, 直到终点 => body元素 距离相累加

 */

// 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,领取 前端资料、学费优惠 !



上一篇文章: JavaScript进阶课堂笔记 第二天(下午)
下一篇文章: JavaScript进阶课堂笔记 第三天(下午)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>