JS学习之盒子模型

沧桑肥肥 2016-11-26 14:47

1.CSS盒子模型包括四个部分组成：设定的宽高+padding+border+margin；

2.JS盒子模型：通过系统提供的属性和方法，来获取当前元素的样式值

JS提供的属性和方法：

1. client系列：clientWidth，clientHeight，clientLeft，clientTop；

2. offset系列： offsetWidth，offsetHeight，offsetLeft，offsetTop，offsetParent

3. scroll系列：scrollWidth，scrollHeight，scrollLeft，scrollTop

3.关于父级

1）parentNode 结构父级

2）offsetParent 定位父级

4.JS提供的属性和方法：

1）clientWidth/clientHeight：元素设定的宽/高+左右padding值/上下padding值；

clientLeft/clientTop：代表对应左边框/上边框的宽度；

**跟内容是否溢出无关；

2）offsetWidth:clientWidth/clientHight+左右border/上下border；

offsetLeft：当前元素的外边框距离定位父级内边框的距离；

**跟内容是否溢出无关；

3）scrollHeight：：

跟内容是否溢出有关

内容溢出：约等于上padding+真实内容的高度；

内容没溢出：等于clientWidth或clientHeight；

为什么是约等于？

①不同浏览器中，拿到的scrollHeight值是不同的；

②同一浏览器是否溢出隐藏，拿到的值不同；

5.关于JS盒子模型的一些问题

1）通过JS的属性和方法拿到的都是属性的复合 样式，拿不到单独的值；getCss;

2）拿到的复合样式值都是整数，不会出现小数；

3）offsetLeft只能求出当前元素的外边框距离定位元素父级的内边框之间的距离，但是求出与定位元素距离body的距离；—offset{left,top}

4)JS盒子模型的兼容性存在问题；—clientWidth,scrollHeight__—win

6.关于浏览器的常用兼容处理思想

①思想一，属性值的判断：

• attr in window

• obj.attr

• typeOf obj.attr==‘function'

②思想二，浏览器异常捕获：try{……} catch(e){……} finally{……}

③思想三，通过浏览器判断处理浏览器兼容问题；

var reg=/MSTE (6|7|8)/g;

• reg.test(window.navigator.userAgent);//true:IE678;

• window.navigator.userAgent.match(reg );true —>ie678

• window.navigator.userAgent.search(reg); !==-1—>ie678

7.结构父级中最大的是HTML；定位父级中最大的元素是body；

8.this的用法

1）当前元素被触发的时候，会调用一个函数，函数中的this指向当前这个元素；

2）函数被调用的时候，点前面是谁，this就是谁

3）自执行函数中的this，window；

4）构造函数中的this是实例；

5）回调函数中的this默认是window；

6）call可以改变this指向

9.类和实例

//给类添加私有属性，跟实例没有任何关系；

//实例：可以使用自己的私有属性和方法，也可以使用原型上的公有方法，但实例无法使用类的私有属性和方法；

function Fn(){

this.aa=123;//给实例添加私有属性；

}

Fn.aa=456;//给类添加私有属性；

var f=new Fn();

alert(f.aa);

alert(Fn.aa)