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

 <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. Spring Cloud Turbine微服务集群实时监控

    本文代码下载地址: https://gitlab.com/mySpringCloud/turbine SpringBoot版本:1.5.9.RELEASE (稳定版) SpringCloud版本:Ed ...

  2. Arrays和String单元测试

    20175227张雪莹 2018-2019-2 <Java程序设计> Arrays和String单元测试 要求 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关 ...

  3. 进程间传递文件描述符——sendmsg和recvmsg函数

    先引入一个例子,该程序的目的是子进程向父进程传递文件描述符,并通过该文件描述符读取buf. #include <func.h> int main(){ int fds[2]; pipe(f ...

  4. 安装Git Bash图文教程

    1.下载Git Bash,下载地址 https://pan.baidu.com/s/1sllsi0d 2.双击Git-2.9.2-64-bit.exe,运行,进行安装:点击“Next” 3.设置安装路 ...

  5. 三个线程，ABC 10次（volatile+synchronized（2 synchronized可以保证内存可见性，所以去掉status 的volatile修饰符）

    package ThreadABC; public class MyThread extends Thread { public static int status = 0; @Override pu ...

  6. Win8 & WP8.1 轻型数据库

    自Win8 和 WP8.1 以来,MS把SQL CE去掉了.为了方便自己的APP升级,减少代码改动量,所以写了个小型的数据库管理,参考WP8.1之前的DataContext. 用时较短,花了几天的时间 ...

  7. redis权限认证及登录

    找到配置文件 redis.conf 找到   requirepass 字段 去掉注释,改为  requirepass  yourpassword 重启redis: service redis rest ...

  8. （Python基础）集合操作

    集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 以下代码演示了去重,增删改查,以及关系测试供参考学习 ...

  9. AET PN结

    电场方向 电场方向和正电荷受力方向相同 飘移运动和扩散运动 多子和电场方向互相抵制,而多子是扩散运动,而对少子则是促进作用,当扩散和漂移达到动态平衡时,我们称PN结形成 PN结特性 单项导电性

  10. SVN：linux下搭建svn服务器

    转载:https://www.cnblogs.com/puloieswind/p/5856326.html 1. 安装SVN服务器: 检查是否已安装 # rpm -qa subversion 安装SV ...