那如果元素即没有在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. react-踩坑记录——iconfont

    选取图标,添加至购物车后,下载代码. 后将下载了的文件夹改名,放入css文件夹中.在组件中使用到的时候按路径引入“iconfont.css”文件即可. 使用

  2. wx小程序-音频视频！

    1.音乐的启动跟暂停 dom里面图片切换的另一种方法 通过变量 改变路径 2.监听 在onload里面 3.定义了一个全局变量 然后在但页面中获取 app.js 单页面中 app.js 的三个生命周期

  3. linux 安装图行界面

    centos6的环境中 代码:[root@ebs122 sysconfig]#yum groupinstall "Desktop" 使用 init 5命令进入图形化界面,如果成功的 ...

  4. 配置Oracle GoldenGate安全性

    本章介绍如何配置Oracle GoldenGate安全性. 本章包括以下部分: Overview of Oracle GoldenGate Security Options Encrypting Da ...

  5. Linux后门权限维持手法

    0x01 Linux 1. 预加载型动态链接库后门 inux操作系统的动态链接库在加载过程中,动态链接器会先读取LD_PRELOAD环境变量和默认配置文件/etc/ld.so.preload,并将读取 ...

  6. Nand flash 三种类型SLC,MLC,TLC【转】

    转自:https://blog.csdn.net/fc34235/article/details/79584758 转载自:http://diy.pconline.com.cn/750/7501340 ...

  7. Vue父子组件和非父子组件传值问题

    父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...

  8. MongoVUE 使用教程

    MongoVUE是一款针对MongoDB的客户端工具,现在连接数据库也叫数据模式有2种方法,一种是B/S结构的数据库,通过网页就可以访问.另外一种就是基于C/S客户端的连接方式,本次为大家分享的这一个 ...

  9. 游记-NOIP2018

    Day -3 受蛊惑跑到理工大去试机,意外发现home里的noilinux账户下有个压缩包,而且还试对了密码,怀着 激动 紧张的心情,打开来看,里面写着 (写出来我就会被禁赛了): asdfasdra ...

  10. MySQL-mysql 8.0.12安装教程

    1.下载zip安装包 去官网下载MySQL8.0 For Windows zip包,下载地址:https://dev.mysql.com/downloads/mysql/ 2.安装 解压zip包到安装 ...