JS获取CSS样式(style/getComputedStyle/currentStyle)

前端之家收集整理的这篇文章主要介绍了JS获取CSS样式(style/getComputedStyle/currentStyle)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件

getComputedStyle

是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])

currentStyle

是IE浏览器的一个属性,返回的是CSS样式对象

element指JS获取的DOM对象 element.style //只能获取内嵌样式 element.currentStyle //IE浏览器获取非内嵌样式 window.getComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式 document.defaultView.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式

注:

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),现在可以省略这个参数。

下面的html中包含两种css样式,id为tag的div是内嵌样式,而id为test的div样式为内部样式.

<Meta charset="UTF-8"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content="Yvette Lau"> <Meta name="Keywords" content="关键字"> <Meta name="Description" content="描述"> Document