今天同事问我一个问题,希望能够获取到CSS样式中背景图的URL地址,我听到之后的第一反应就是style来获取,但是在实践的过程中遇到了一些问题。
我们在CSS中设置了背景图片,但是发现并没有办法使用JS的style来获取到。这个时候,我们应该选择其他的方式。特此,写一篇文章来记录一下整个思考和解决的过程。
之前一直在新浪博客上去写自己的技术博客,但是发现貌似没有几个人看,也可能是因为我更新的太慢了。但是还是感觉自己的博客所托非人,貌似关于技术的博客都是在这个平台上完成的,所以毅然决然的决定换一个地方来写自己的技术博客,希望能够记录自己的点滴,逐步提升自己。
好了,话不多说,我们直接切入正题。
- 元素.style.css样式,我们可以使用这个方法获取到元素内联样式中的属性值,但是如果写的是嵌入式,我们是没有办法获取到的
- 我们希望获取到嵌入式样式表中的样式,也就是属性和属性值。
这个时候,我们需要使用getComputedStyle和currentStyle这两个方法。 - 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)