js无法获取style样式的问题解析与解决方法

一、JS只能修改内嵌方式设置的样式值
在JavaScript中,通过document.getElementById(id).style.XXX可以获取到XXX的值,但意外的是这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

1、currentStyle(IE Opera)。即:

mydiv.currentStyle.left或 mydiv.currentStyle["left"]




2、getComputedStyle(FF Chrome)

getComputedStyle(mydiv),null)["width"]

综合:

function getStyle(obj,attr) { if(typeof getComputedStyle) return getComputedStyle(obj,null)[attr]; else return obj.currentStyle[attr]; }

这样调用即可:

getStyle(mydiv,'width')



【js无法获取style样式的问题解析与解决方法】

最后,样式表有三种方式:


内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。



内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。



外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

    推荐阅读