DOM2 和 DOM3

样式：

访问元素的样式：

var myDiv=document.getElementById('oDiv');
myDiv.style.backgroundColor='red';

当设置多个样式时候：

var myDiv=document.getElementById('oDiv');
myDiv.style.cssText="width: 200px;background-color: red;";

另外还能通过getPropertyValue()和getPropertyCssValue()方法来访问css样式。

var myDiv=document.getElementById('oDiv');
var prop,value,i;
var len=myDiv.style.length;
for(i=0;i<len;i++){
	prop=myDiv.style.item(i);
	value=myDiv.style.getPropertyValue(prop);
	alert(prop+":"+value);
}

var myDiv=document.getElementById('oDiv');
var prop,value,i;
var len=myDiv.style.length;
for(i=0;i<len;i++){
	prop=myDiv.style.item(i);
	value=myDiv.style.getPropertyCSSValue(prop);
	alert(prop+":"+value.cssText+"("+value.cssValueType+")");
}

移除样式：removeProperty()。

元素大小：

偏移量：

offsetHeight：元素在垂直方向上占用的空间大小

offsetWidth：元素在水平方向上占用的空间大小

offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

要知道某个元素在页面上的偏移量，将这个元素的offsetLeft 和offsetTop 与其offsetParent的相同属性相加，如此循环直至根元素，就能得到一个基本准确的值。

function getElementLeft(element){
	var actualLeft=element.offsetLeft;
	var current=element.offsetParent;
	while(current!==null){
		actualLeft+=current.offsetLeft;
		current=current.offsetParent;
	}
	return actualLeft;
}

function getElementTop(element){
	var actualTop=element.offsetTop;
	var current=element.offsetParent;
	while(actualTop!==null){
		actualTop+=current.offsetTop;
		current=current.offsetParent;
	}
	return actualTop;
}

客户区大小：元素内容及其内边距所占据的空间大小。

clientWidth 和clientHeight。

function getViewport(){
	if(document.compatMode=="BackCompat"){
		return{
			width:document.body.clientWidth;
			height:document.body.clientHeight;
		};
	}else{
		return{
			width:document.documentElement.clientWidth;
			height:document.documentElement.clientHeight;
		};
	}
}

滚动大小：包含滚动内容的元素的大小。

scrollTop：在被隐藏在内容区域上方的像素数。

scrollLeft：在被隐藏在内容区域左侧的像素数。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

srcollHeight：在没有滚动条的情况下，元素内容的总高度。
注意：在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

function getViewport(element){
	var docHeight,docWidth;
	if(document.compatMode=="BackCompat"){
		docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
		docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
	}else{
		docWidth=Math.max(document.body.scrollWidth,document.body.clientWidth);
		docHeight=Math.max(document.body.scrollHeight,document.body.clientHeight);
	}
}

可以通过改变scrollTop和scrollLeft的值来确定元素当前滚动的状态。

scrollTop=0：回到顶部

确定元素大小：getBoundingClientRect()方法。包含四个属性：top,left,right,bottom。

function getBoundingClientRect(element){
	if(typeof arguments.callee.offset!="number"){
		var scrollTop=document.documentElement.scrollTop;
		var temp=document.createElement("div");
		temp.style.cssText="position: absolute;left:0;top:0;";
		document.body.appendChild(temp);
		arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop;
		document.body.removeChild(temp);
		temp=null;
	}
	var rect=element.getBoundingClientRect();
	var offset=arguments.callee.offset;
	
	return{
		left:rect.left+offset,
		right:rect.right+offset,
		top:rect.top+offset,
		bottom:rect.bottom+offset
	};
}

为了跨浏览器实现：

function getElementLeft(element){
	var actualLeft=element.offsetLeft;
	var current=element.offsetParent;
	while(current!==null){
		actualLeft+=current.offsetLeft;
		current=current.offsetParent;
	}
	return actualLeft;
}
function getElementTop(element){
	var actualTop=element.offsetTop;
	var current=element.offsetParent;
	while(actualTop!==null){
		actualTop+=current.offsetTop;
		current=current.offsetParent;
	}
	return actualTop;
}
function getBoundingClientRect(element) {
	var scrollTop = document.documentElement.scrolltop;
	var scrollLeft = document.documentElement.scrollleft;
	if(element.getBoundingClientRect) {
		if(typeof arguments.callee.offset != "number") {
			var scrollTop = document.documentElement.scrollTop;
			var temp = document.createElement("div");
			temp.style.cssText = "position: absolute;left:0;top:0;";
			document.body.appendChild(temp);
			arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
			document.body.removeChild(temp);
			temp = null;
		}
		var rect = element.getBoundingClientRect();
		var offset = arguments.callee.offset;

		return {
			left: rect.left + offset,
			right: rect.right + offset,
			top: rect.top + offset,
			bottom: rect.bottom + offset
		};
	}else{
		var actualLeft=getElementLeft(element);
		var actualTop=getElementTop(element);
		return{
			left:actualLeft-scrollLeft,
			right:actualLeft+element.offsetWidth-screenLeft,
			top:actualTop-scrollTop,
			bottom:actualTop+element.offsetHeight-screenTop
		};
	}

}