那如果元素即没有在style属性中设置宽高，也没有在样式表中设置宽高，还能用getComputedStyle或currentStyle获取吗？答案是getComputedStyle可以，currentStyle不可以 。

点击查看原文

实际项目中，可能要获取元素的CSS样式属性值，然后再进行其他的操作。

在操作中可能会遇到这种情况，有时候能够正确获取CSS属性值，有时候则不能。

下面通过代码实例分析一下出现这种问题的原因，以及解决方案。

首先看一段代码实例：

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>getComputedStyle使用</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属性无所不能，不但能设置元素的样式，也能够获取到对应的样式，但它不是万能的，它只能够获取通过style设置的元素CSS属性值：

（1）.style内签到HTML标签内设置。

（2）.dom.style.width="100px"这样类似设置。

这时getComputedStyle方法的作用就得以体现，它可以获取指定元素对应CSS属性的最终计算值。

语法结构：

window.getComputedStyle(element, [pseudoElt])
 

参数解析:

（1）.element：必需，要获取样式值的元素对象。

（2）.pseudoElt：可选，表示指定节点的伪元素（:before、:after、:first-line、:first-letter等）。

浏览器支持:

（1）.IE9+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

代码实例:

 
<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>getComputedStyle使用</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的背景颜色。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>getComputedStyle使用</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等属性。

getComputedStyle()用法详解的更多相关文章

  1. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  2. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  3. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  4. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  5. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  6. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  7. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  8. systemctl命令用法详解

    systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...

  9. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

随机推荐

  1. Python问题：'Nonetype' object is not iterable

    参考链接:http://blog.csdn.net/dataspark/article/details/9953225 [解析] 这个错误提示一般发生在将None赋给多个值时. [案例] 定义了如下的 ...

  2. ReentrantLock(重入锁)的使用

    //效果和synchronized一样,都可以同步执行,lock方法获得锁,unlock方法释放锁public class MyService { private Lock lock = new Re ...

  3. IDEA在同一窗口导入多个项目

    在同一窗口打开多个项目 1. 当前窗口: 2. 3.  选择import module即可.然后一直点击next导入OK即可. 同一窗口目录下创建多个项目 1.File→New→Module 2.Ja ...

  4. CF1139A Even Substrings

    题目地址:CF1139A Even Substrings 一个数是偶数等价于其最后一位为偶数(2/4/6/8/0) 从左往右扫一遍,如果一个数是奇数则直接跳过,偶数则加上它对答案的贡献 这里的贡献应该 ...

  5. 解决ubuntu的gedit编辑器中文乱码的问题

    hello,本人 sky 又和大家见面了很多人在使用ubuntu系统时发现打开windows系统下面写的文档的话会发现乱码,是因为编码格式的问题windows系统下面是用GB2312等编码格式进行中文 ...

  6. python性能分析之cProfile模块

    cProfile是标准库内建的分析工具的其中一个,另外两个是hotshot和profile -s cumulative -s cumulative开关告诉cProfile对每个函数累计花费的时间进行排 ...

  7. Linux下的压缩和解压缩命令gzip/gunzip

    作者:邓聪聪 Linux下的压缩和解压缩命令——gzip/gunzip yum -y install zip gzip (--安装压缩工具) gzip命令 gzip命令用来压缩文件.gzip是个使用广 ...

  8. C++面向对象的特点

    C++面向对象的特点 面向对象的特点主要有: 封装, 继承, 多态; 现在自己的简单理解如下, 但要明白具体怎么实现, 背后的原理是什么? 什么是封装, C++怎么实现封装 封装的大致可以分为: 函数 ...

  9. js垃圾回收（转

    和C#.Java一样JavaScript有自动垃圾回收机制,也就是说执行环境会负责管理代码执行过程中使用的内存,在开发过程中就无需考虑内存分配及无用内存的回收问题了.JavaScript垃圾回收的机制 ...

  10. QT 出现信号槽不触发的问题

    主要有以下三点: 1)槽函数未声明为 slots 类型, 信号函数未声明为 signals所致 2)槽函数和信号函数的参数不一致所致 3)connect关联时失败