您的位置:首页> 前端教程> CSS操作

getComputedStyle() 用法

2018-8-24 00:50| 作者: admin| 查看: 6253| 评论: 0|来自: 蚂蚁部落

本文将通过代码实例详细介绍一下getComputedStyle的用法,首先看一个初学者经常遇到的问题。

项目中,经常需要获取元素CSS属性值,可能会遇到后面类似情况,有时候能够正确获取,有时候则不能。

下面分析一下出现此问题的原因,以及解决方案,首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
    width:100px;
    height:100px;
    margin-top:20px;
}
#first{background-color:red}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var first=document.getElementById("first");
  var second=document.getElementById("second");
  alert(first.style.backgroundColor);
  alert(second.style.backgroundColor);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>

代码运行后,顺利弹出第二个div的背景颜色,第一个的没有获取到。

很多朋友可能认为dom.style属性无所不能,不但能设置元素的样式,也能够获取到对应的样式值。

然而事实是,dom.style只能够获取通过如下方式设置的CSS属性值:

(1).HTML标签的style属性设置CSS属性值。

(2).dom.style.width="100px"这样类似设置CSS属性值。

此时,getComputedStyle方法的功能得以体现,它可以获取元素CSS属性的最终计算值。

语法结构:

[JavaScript] 纯文本查看 复制代码
window.getComputedStyle(element, [pseudoElt])

参数解析:

(1).element:必需,要获取样式值的元素节点对象。

(2).pseudoElt:可选,表示指定元素节点的伪元素(:before、:after、:first-line、:first-letter等)。

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  margin-top:20px;
}
#first{background-color:red}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var first=document.getElementById("first");
  var second=document.getElementById("second");
  alert(window.getComputedStyle(first,null).backgroundColor);
  alert(second.style.backgroundColor);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>

以上代码成功的获取了第一个div的背景颜色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  margin-top:20px;
}
#first{background-color:red}
#first::before{
  content:"添加的内容";
  color:#0000ff;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var first=document.getElementById("first");
  var second=document.getElementById("second");
  alert(window.getComputedStyle(first,":before").color);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>

以上代码可以获取伪元素中字体颜色值(颜色会被转换成RGB或者RGBA模式)。

不能直接获取复合属性值,例如padding属性的值,只能读paddingLeft、paddingTop等属性。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部