论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)
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值