1. 对象.style.样式名 

弊端就是只能获取行内样式

2.window.getComputedStyle(对象，null);


最好用第二种方式

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <style type="text/css">

        #box{

            width: 40px;

            height: 40px;

            background-color: red;

        }

    </style>

    <body>

        <button id="btn" >切换</button>

        <div id="box" style="border: 1px solid #0f0;"></div>

    </body>

        <script>

            var box = document.getElementById("box");

            var btn = document.getElementById("btn");

            var sty = getComputedStyle(box,null);

            btn.onclick = function(){

                console.log(box.style.background);

                if(sty.backgroundColor == "rgb(255, 0, 0)"){

                    box.style.backgroundColor = "blue";

                }else{

                    box.style.backgroundColor = "red";

                }

            }

        </script>

</html>

js中获取css样式的两种方式的更多相关文章

  1. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  2. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  3. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  4. strus2中获取表单数据 两种方式 属性驱动 和模型驱动

    strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...

  5. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  7. 从request中获取文件流的两种方式，配置文件上传大小

    原文地址:https://blog.csdn.net/xyr05288/article/details/80692132

  8. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  9. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

随机推荐

  1. jmeter服务器监控插件下载配置

    jmeter想要监控服务器CPU.内存.磁盘.网络等相关资源需要借助plugins插件 下载jmeter性能监控插件 1.下载jmeterPlugins-Standard和jmeterPlugins- ...

  2. 3. STL编程三

    1. 算法容器的使用: #include <iostream> #include <functional> #include <vector> #include & ...

  3. SpringBoot整合MyBatis及Thymeleaf

    http://www.cnblogs.com/ludashi/archive/2017/05/08/6669133.html 上篇博客我们聊了<JavaEE开发之SpringBoot工程的创建. ...

  4. 数据结构基础 ---- 数组的理解和实现(Java)

    什么是数组 数组是由类型相同的数据元素构成的有序集合,每个元素称为数组元素,每个元素受n(n>= 1)个线性关系的约束,每个元素在n个线性关系中的序号i1, i2, ....., in称该元素的 ...

  5. UML总结

    http://www.cnblogs.com/riky/archive/2007/04/07/704298.html

  6. QuantLib 金融计算——随机过程之 Heston 过程

    目录 QuantLib 金融计算--随机过程之 Heston 过程 Heston 过程 参考文献 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--随机过程之 H ...

  7. LTE:EPC

    User Identifiers - IMSI and GUTI IMSI   A globle id that unique identifies a subscribe.It composed t ...

  8. OpenERP 中的on_change方法总结

    1.xml中应为on_change=""的形式 2.py文件中 self,cr,uid,ids为必备参数,后面的参数根据xml文件中的参数的数量而定 3.return的是一个字典, ...

  9. vs2013 调试libevent 源码

    自己内功的提升,无非是向前辈学习和修炼自身,对于编码也是如此,学习优秀的库只有从 源代码学起,才能深刻理解库实现的来龙去脉,加深自己的理解,提升自己的功力. 今天就介绍一下vs2013 下面调试lib ...

  10. 《LeetBook》leetcode题解(12):Integer to Roman[M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...