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