JavaScript之css操作总结

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

用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等。