JavaScript脚本化CSS

行内样式和计算样式

元素节点.style：获取的是行内样式表

1. 一般使用行内样式表来设置某些css属性
2. 含有连词符的css属性，需要使用小驼峰写法
3. float是js里面的保留字，一般使用cssFloat

var box = document.getElementById("box");
console.log(box.style.height);

window.getComputedStyle(dom,null) IE8及以上，获取的是计算样式（conputed面板，属性名和属性值组成的对象）

1. 一般计算样式表用来获取css属性
2. null可以换成after或者before这样能够获取伪元素的计算样式表

console.log(window.getComputedStyle(box,"after").height);

dom.currentStyle IE8以下，获取计算样式表

console.log(box.currentStyle[height]);

获取计算样式兼容写法

function getStyle(dom,attr){
	if(dom.currentStyle){//IE8以下
		return dom.currentStyle[attr];
	}else{//IE8及以上
		return window.getComputedStyle(dom,null)[attr];
	}
}
console.log(getStyle(box,"height"));

元素的显示尺寸

获取元素的显示尺寸，只能读不能设置

1. dom.clientWidth____width+左右的padding
2. dom.clientHeight____height+上下的padding
3. dom.offsetWidth____width+左右的padding+上下的border
4. dom.offsetHeight____height+上下的padding+上下的border

当dom的内容超过dom的尺寸时

1. dom.scrollWidth____获取dom的内容宽度
2. dom.scrollHeight____获取dom的内容高度

var box = document.getElementById("box");
console.log(box.scrollHeight);

元素的位置

获取元素的位置，只能读取不能设置

1. dom.offsetParent____获取dom的定位父级
2. dom.offsetLeft____获取dom到定位父级的水平距离
3. dom.offsetTop____获取dom到定位父级的竖直距离
4. dom.clientLeft____获取dom左边框的宽度
5. dom.clientTop____获取dom上边框的宽度
6. dom.scrollLeft____获取dom里面的内容的水平滚动距离
7. dom.scrollTop____获取dom里面的内容的垂直滚动距离

窗口的尺寸

IE8以上
window.innerWidth：获取浏览器窗口的宽度值
window.innerHeight：获取浏览器窗口的高度值

IE8以下

标准模式：
document.documentElement.clientWidth
document.documentElement.clientHeight

怪异模式：
document.body.clientWidth
document.body.clientHeight

兼容性写法

function getViewportOffset(){
	if(window.innerWidth){//IE8以上
		return{
			w:window.innerWidth,
			h:window.innerHeight
		}
	}else{//IE8以下
		if(document.compatMode=="backCompat"){//判断是否为怪异模式
			return {//怪异模式
				w:document.body.clientWidth,
				h:document.body.clientHeight
			}
		}else{//标准模式
			return {
				w:document.documentElement.clientWidth,
				h:document.documentElemnet.clientHeight
			}
		}
	}
}

窗口的滚动距离

IE8以上
window.pageYOffset：获取浏览器窗口Y轴滚动距离
window.pageXOffset：获取浏览器窗口X轴滚动距离

IE8以下
document.documentElement.scrollLeft
document.documentElement.scrollTop

document.body.scrollLeft
document.body.scrollTop

在IE8以下兼容性比较混乱，可以使用两个值相加，因为这两个值是不能同时存在的

兼容性写法

function getScrolllOffset(){
	if(window.pageXOffset==0||window.pageXOffset){//IE8以上
		return {
			x:window.pageXOffset,
			y:window.pageYOffset
		}
	}else{//IE8以下
		return {
			x:document.documentElement.scrollLeft+document.body.scrollLeft,
			y:document.documentElement.scrollTop+document.body.scrollTop
		}
	}
}