JS的盒子模型

client系列

1. clientWidth = 内容的width + 左右两个padding值；得到的clientWidth的值不带单位；
2. clientHeight = 内容的height + 上下两个padding值；
3. clientLeft 代表的是左边框的宽度 (就是border的宽度);
4. clientTop 代表上边框的高度;

offset系列

1. offsetWidth 代表的是盒子的总宽度 = clientWidth + 左右两个border的宽度；
2. offsetHeight 代表的是盒子的总高度 = clientHeight + 上下两个border的高度；

scroll系列

1. srcollWidth 代表一个左padding + 内容的真实宽度；
2. srcollHeight 代表一个上padding + 内容的真实高度； 如果内容没有超出，srcollWidth=左右两个padding+内容的真实宽度（相当于clientWidth）；srcollHeight=上下两个padding+内容的真实高度（相当于clientHeight）；

---

可视窗口的宽度或高度

获取浏览器可视窗口的宽度或高度（考虑兼容性）；得到的结果不带单位； var width = document.documentElement.clientWidth || document.body.clientWidth; var height = document.documentElement.clientHeight || document.body.clientHeight;

---

偏移量offsetLeft offsetTop

父级参照物：offsetParent position会影响父级参照物；

一般情况下，所有元素的父级参照物都是body；如果给元素加上position属性（relative、absolute、fixed），会让所有子孙元素的父级参照指向当前这个元素；

console.log(document.body.offsetParent); //body的父级参照物是null

偏移量：offsetLeft offsetTop offsetLeft ： 左偏移量；从当前元素的左外边框到父级参照物的左内边框；得到的值不带单位； offsetTop ：上偏移量；从当前元素的上外边框到父级参照物的上内边框；得到的值不带单位； 封装一个方法：offset

1. 获取当前元素的左偏移量；
2. 获取当前元素的父级参照物；
3. 通过while循环；加上父级参照物的border的宽度；加上父级参照物的左偏移量；再获取父级参照物的父级参照物；依次进行累加，直到当前父级参照物是body，则终止while循环；

function offset(curEle) {
	//获取当前元素的左偏移量
	var l = curEle.offsetLeft;
	var t = curEle.offsetTop;
	//获取当前元素的父级参照物
	var parent = curEle.offsetParent;
	// 当父级参照物是body的时候，终止循环；
	while (parent !== document.body) {
		//加上父级参照物的左偏移量和父级参照物的左边框
		l += parent.offsetLeft + parent.clientLeft;
		t += parent.offsetTop + parent.clientTop;
		parent = parent.offsetParent;
	}
	return {left:l,top:t}
}
console.log(offset(center));
console.log(offset(center).left);
console.log(offset(center).top);

---

clientWidth clientHeight clientLeft clientTop offsetWidth offsetHeight offsetLeft offsetTop offsetParent srcollWidth srcollHeight 以上11个属性都是只读属性；只能获取，不能对其进行修改；

---

getCss获取样式

1. 元素.style.width 这种方式只能获取行内设置的样式；如果是css中的样式，这是获取不到的； 行内样式的权重高于css中的样式；

//获取行内样式
var box1 = document.getElementById('box1');
console.log(box1.style.width);  //100px
//设置行内样式
box1.style.width = "200px"; 

2. getComputedStyle:获取浏览器计算的样式; 适用于ie8以上；在ie8以下，getComputedStyle这个方法在window中不存在；

console.log(getComputedStyle(box).width); //100px
console.log(getComputedStyle(box)['width']); //100px

3. currentStyle 针对ie8及以下，(谷歌浏览器没有这个方法)

console.log(box.currentStyle.width);

封装一个方法

function getCss(curEle,attr) {
	var val;
	if ("getComputedStyle" in window) {
		val = getComputedStyle(curEle)[attr];
	}else{
		val = curEle.currentStyle[attr];
	}
	//如果传递的属性是宽度、高度等等等，那么需要去掉单位px，变成数字;
	var reg = /^(width|height|left|top|right|bottom|margin|padding|fontSize)$/;
	if (reg.test(attr)) {
		val = parseFloat(val);
	}
	return val;
}
console.log(getCss(box,"width")); //100px

---

setCss设置样式

设置样式：元素.style.属性='值'

var box = document.getElementById('box');
box.style.width = "200px";
box.style.height = "200px";

封装一个方法来实现设置样式

function setCss(curEle,attr,val) {
	var reg = /^(width|height|left|top|right|bottom|margin|padding|fontSize)$/;
	//通过正则判断是否需要拼接“px”；如果需要拼接，并且是number类型，直接拼接px；
	if (reg.test(attr)) {
		if (typeof val === "number") {
			val = val + 'px';
		}
	}
	curEle.style[attr] = val;
}
setCss(box,"width","300px");

---

srcollTop和srcollLeft

srcollTop srcollLeft 既可以获取，又可以设置 srcollTop 代表滚动条卷起的高度（隐藏的高度） 有兼容性问题
在ie6及以下，document.documentElement.scrollTop的值为0

var srcollT = document.documentElement.scrollTop || document.body.scrollTop;

封装一个方法 如果传一个参数，就是获取页面滚动条的卷起的高度； 如果传两个参数，就是设置页面滚动条卷起的高度；

function win(attr,val) {
	if (!val) { //如果val参数不存在，就是获取
		return document.documentElement[attr] || document.body[attr];
	}
	document.documentElement[attr] = val;
	document.body[attr] =val;
}
win("scrollTop"); // 获取当前页面的滚动条卷起的高度；
win("scrollTop",500); //设置当前页面的滚动条卷起的高度；