JavaScript之css操做总结

     用js获取、设置元素的样式是前端常常须要用到的，这里总结一些经常使用到的办法。

    1. 用js修改元素的class。

    class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，若是改变了 class 属性的值，标签所引用的样式表也就更换了。

element.className;//能够获取元素的class。
element.className='';//能够设置元素的class。

    2. 用js直接设置、获取元素的内联样式。

        ①  对于没有中划线的css属性通常直接使用style.属性名。如obj.style.width， obj.style.left， obj.style.position 获取或设置元素对应的样式。

        ② 对于含有中划线的css属性，将每一个中划线去掉并将每一个中划线后的第一个字符换成大写。 如： obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex 获取或设置元素对应的样式。

        ③ js操做css float属性的特殊写法 。 由于float是Javascript的保留字， 因此不能使用obj.style.float来设置或获取值， 其正确的使用方法是为：IE:obj.style.styleFloat，其余浏览器Mozilla(gecko)，ff等用styleFloat:obj.style.cssFloat。

        ④ 一次操做元素的多个css属性用cssText。如：

obj.style.cssText;//获取元素全部的内联样式
obj.style.cssText='margin-left: 1px; position: relative; left: 10px;';//一次设置多个css属性

    3. 内部样式和外部样式设置获取。

    元素的样式咱们通常不会使用行内样式来设置，而是经过link外部样式设置。那么能够用下面的方式来获取元素的样式：

var getStyle=function(obj,styleName) {
	if (obj.currentStyle) {
		// ie
		getStyle=function(obj,styleName){
           return obj.currentStyle[styleName];
        }
        return obj.currentStyle[styleName];
	} else {
		getStyle=function(obj,styleName){
           return getComputedStyle(obj, null)[styleName];
        }
        return getComputedStyle(obj, null)[styleName];
	}
}

    上面的方法不但能够获取非内联样式，也能够获取内联样式。可是不能获取符合样式如padding属性值，只能获取单同样式如padding-left等。