前端开发您现在的位置是:首页 > 博客日志 > 前端开发

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

<a href='mailto:'>微wx笑</a>的头像微wx笑 2021-08-16前端开发 0 0关键字:   

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

一、JS只能修改内嵌方式设置的样式值5mI无知人生


5mI无知人生

       在JavaScript中,通过document.getElementById(id).style.XXX可以获取到XXX的值,但意外的是这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。5mI无知人生

1、currentStyle(IE Opera)。即:5mI无知人生


5mI无知人生

mydiv.currentStyle.left  或5mI无知人生

mydiv.currentStyle["left"]5mI无知人生

2、getComputedStyle(FF Chrome)5mI无知人生


5mI无知人生

getComputedStyle(mydiv),null)["width"]5mI无知人生

综合:5mI无知人生

function getStyle(obj,attr)5mI无知人生

 {5mI无知人生

            if(typeof getComputedStyle)5mI无知人生

                return getComputedStyle(obj,null)[attr];5mI无知人生

            else return obj.currentStyle[attr];5mI无知人生

}5mI无知人生

这样调用即可:5mI无知人生

getStyle(mydiv,'width')5mI无知人生


5mI无知人生


5mI无知人生

最后,样式表有三种方式:5mI无知人生


5mI无知人生


5mI无知人生

内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。5mI无知人生


5mI无知人生

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


5mI无知人生

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

————————————————5mI无知人生

版权声明:本文为CSDN博主「白日梦想jun」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。5mI无知人生

原文链接:https://blog.csdn.net/oiu1010110/article/details/787375385mI无知人生


5mI无知人生

本文为转载文章,版权归原作者所有,不代表本站立场和观点。

很赞哦! () 有话说 ()

相关文章