DOM盒模型的各种width和height属性

发表于

client系列（和内容是否溢出盒子无关）

  1. clientWidth:内容的宽度+左右padding
  2. clientHeight:内容的高度+上下padding
  3. clientLeft:左边框的宽度（border-left-width）
  4. clientTop:上边框的宽度（border-top-width）

offset系列（和内容是否溢出盒子无关）

  1. offsetWidth:clientWidth+左右边框
  2. offsetHeight:clientHeight+上下边框
  3. offsetLeft:子元素的外边框相对于父定位元素（没有则指向body）的内边框的偏移量
  4. offsetTop:子元素的外边框相对于父定位元素（没有则指向body）的内边框的偏移量
  5. offsetParent: 指向子元素的定位父元素，如果没有就指向body，body指向null。

scroll系列

  1. scrollWidth:当内容未溢出容器时等于clientWidth.当溢出时是真实宽度+左右padding
  2. scrollHeight:当内容未溢出容器时等于clientHeight。当溢出时是真实高度+上下padding
  3. scrollTop:滚动条卷去的高度
  4. scrollLeft:滚动条卷去的宽度
    注：如果设置了overflow:hidden;各浏览器结果不同。

取值问题

我们通过这13个属性获取的都是近似的整数。

浏览器的盒模型

  1. 对于浏览器而言，clientWidth/clientHeight是当前浏览器可视窗口的宽高（一屏幕的宽高）
  2. 对于浏览器而言，scrollWidth/scrollHeight是当前页面的真实宽高（所有屏加起来宽高的近似值）

浏览器盒模型属性获取/设置方法的封装

1
2
3
4
5
6
7
function win (attr,value) {
	if (typeof value !=='undefined') {
		return document.documentElement[attr] ||document.body[attr];
	}
	document.documentElement[attr]=value;
	document.body[attr]=value;
}

获取某元素相对浏览器的偏移量 方法的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function offset (curEle) {
	var l=curEle.offsetLeft;
	var t=curEle.offsetTop;
	var par=curEle.offsetParent;
	//一层层定位祖先向上累加
	while (par) {
		if (window.navigator.userAgent.indexOf('MSIE 8.0')!==-1) {
				l+=par.clientLeft;
				t+=par.clientTop;
		}
		l+=par.offsetLeft;
		t+=par.offsetTop;
		par=par.offsetParent;
	}
	return {left:l,top:t};
}

计算后的样式值的获取

一般我们用 元素.style.样式来获取元素的样式。这样获取到的是元素的行内样式。如果想获取元素经过计算后的样式需要使用window.getComputedStyle(ele,null);
经过浏览器计算过的样式是指 只要当前标签可以在浏览器中呈现出来，那么他所有样式都是经过浏览器计算过的，哪怕那些样式你没有写也可以获取到。
window.getComputedStyle(box,null)接收两个参数。 box指要获取样式的元素，null指伪类。

获取计算后样式的 方法封装

1
2
3
4
5
6
7
8
9
function getCss (curEle,attr) {
	var val=null;
	try {
		val=window.getComputedStyle(curEle,null)[attr];
	} catch (e) {
		val=curEle.currentStyle[attr];
	}
	return val;
}