论style、getComputedStyle、currentStyle之间的区别和联系

今天同事问我一个问题,希望能够获取到CSS样式中背景图的URL地址,我听到之后的第一反应就是style来获取,但是在实践的过程中遇到了一些问题。
我们在CSS中设置了背景图片,但是发现并没有办法使用JS的style来获取到。这个时候,我们应该选择其他的方式。特此,写一篇文章来记录一下整个思考和解决的过程。
之前一直在新浪博客上去写自己的技术博客,但是发现貌似没有几个人看,也可能是因为我更新的太慢了。但是还是感觉自己的博客所托非人,貌似关于技术的博客都是在这个平台上完成的,所以毅然决然的决定换一个地方来写自己的技术博客,希望能够记录自己的点滴,逐步提升自己。
好了,话不多说,我们直接切入正题。
  1. 元素.style.css样式,我们可以使用这个方法获取到元素内联样式中的属性值,但是如果写的是嵌入式,我们是没有办法获取到的
  2. 我们希望获取到嵌入式样式表中的样式,也就是属性和属性值。
    这个时候,我们需要使用getComputedStyle和currentStyle这两个方法。
  3. getComputedStyle的语法如下:
    let style=window.getComputedStyle(element,[pseudoElt]);
    element表示需要找到的元素,pseudoElt表示指定一个要匹配的伪元素的字符串,必须对普通元素设置null。一般默认写成false,是为了兼容低版本的火狐。
    注意:这个方法返回的是一个实时的样式,每次的更新都会获取不一样的。
    let elem = document.getElementById(“elem-container”);
    let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue(“height”);
    let theCSSprop = window.getComputedStyle(elem,null)[“height”];
    在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的, 因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 (iframe)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章