想要得到某个元素的某个样式属性，可以用：

 <div id="div01" style="color:red">123</div>

 var ele = document.getElementById("div01");

 console.log(ele.style.color);

但这样只能得到写在元素上的行内样式，对于link进来的样式文件或<style></style>中写的样式是获取不到的。

标准浏览器提供了一个getComputedStyle函数，具体用法是:

 // 第一个参数为要获取样式的节点，第二个参数为伪类，如:hover，如果没有就填false或null.返回CSSStyleDeclaration对象；

 window.getComputedStyle(element,伪类)

 //可以通过属性名来获得需要的样式，下面就得到了元素的字体颜色

 window.getComputedStyle(ele,false)["color"];

可IE不支持，但它提供了一个currentStyle对象，得到的结果和getComputedStyle差不多

 // IE下通过这种方式也可以得到元素的字体颜色

 ele.currentStyle["color"];

综合上面的情况，我们做一下兼容便可以得到靠谱的解决方法！

 function getStyle(ele,name){

   if (ele.currentStyle) { // IE下的处理

       return ele.currentStyle[name];

   } else { // 标准浏览器处理

        return getComputedStyle(ele, false)[name];

   }

 }

再去获取div01的样式的时候就很方便了！

完整代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>demo</title>

   <style>

     #div01{font-size:16px;}

   </style>

 </head>

 <body>

     <div id="div01" style="color:red">123</div>

   <script>

   function getStyle(ele,name){

       if (ele.currentStyle) {

         return ele.currentStyle[name];

       } else {

         return getComputedStyle(ele, false)[name];

       }

   }

   var ele = document.getElementById("div01");

   console.log(getStyle(ele,"color")); // rgb(255, 0, 0)

   console.log(getStyle(ele,"fontSize")); // 16px

   </script>

 </body>

 </html>

兼容的获取样式的函数getStyle()的更多相关文章

  1. js如何获取样式？

    在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style); ...

  2. （转载）记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  3. getstyle() 获取样式

    问题:在js动画中,如果元素设置了border,padding等,获取到的样式是盒子的样式,这样会影响动画的正常显示. 解决方案一:在元素的行内添加样式  如 <div style=" ...

  4. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  5. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  6. JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、

    缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...

  7. JS获取样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS之获取样式

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 利用原生JavaScript获取样式的方式小结

    来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...

随机推荐

  1. day03 文件操作

    目录 1.文件操作实例 2.文件常用操作 3.with模块操作文件 常用实例,把文件里面的内容读出来做成字典的形式在做成字列表展示. 1.精简版. lst = []f = open("fil ...

  2. tomcat 闪退问题排查

    由于启动tomcat回出现闪退情况,看不到异常 解决方法: 一. 打开startup.bat文件,在最下面 在文本的最后敲上pause,保存后重新运行startup.bat,这时候窗口会留在桌面上(调 ...

  3. spring事务详解（四）测试验证

    系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高 一.引子 ...

  4. SourceInsight宏插件2(非常好用，强力推荐)

    Quicker宏在SI中的使用方法(下载地址:链接:https://pan.baidu.com/s/1VrDxlPhft7RPUCCOKxsGIg  提取码:2d4u) Quicker宏的添加到SI中 ...

  5. ARC085F NRE

    看了题解. 题目大意 你有一个长度为 \(N\) 的全为 \(0\) 的序列 \(A\),给你一个长度同样为 \(N\) 的 \(0/1\) 序列 \(B\),允许你对把 \(A\) 的一些区间中的数 ...

  6. 系统右键菜单（级联菜单）资料--cascading menus

    通过RegistryKey 简单的实现单级菜单 http://www.cnblogs.com/sjcatsoft/archive/2009/02/25/1398203.html 通过subcomman ...

  7. php中cookie和session的总结

    cookie: 设置cookie:  setcookie("name","zhang","time()+3600"); 参数一:属性名 参数 ...

  8. 基于STM8的IIC协议---STM8-第五章

    1. 综述 I2C(IIC,Inter-Integrated Circuit),两线式串行总线,由PHILIPS公司开发用于连接微控制器及其外围设备. 它是由数据线SDA和时钟SCL构成的串行总线,可 ...

  9. 记一次bond引起的网络故障

    本案中3个关键服务器 物理服务器:192.168.6.63,简称P,(Physical server) KVM-VM:192.168.6.150,是物理服务器P上的一个KVM虚机,简称VM NAS:外 ...

  10. mybatis入门篇：mybatis动态SQL

    1.if用法 <select id="selectUser" resultType="com.forest.owl.entity.User"> se ...