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. ASP.NET：Application,Session,Cookie,ViewState和Cache之间的区别（转）

    在ASP.NET中,有很多种保存信息的对象.例如:Application,Session,Cookie,ViewState和Cache等,那么它们有什么区别呢?每一种对象应用的环境是什么? 为了更清楚 ...

  2. Apache环境修改.htaccess文件实现子目录强制HTTPS访问

    如果要在Apache环境下实现子目录强制HTTPS地址访问,该怎么实现呢?在此文章中将与大家一起分享如何在Apache环境下修改.htaccess文件来实现子目录强制HTTPS地址访问. 1.根目录域 ...

  3. request.getSession(true/false)的区别

    javax.servlet.http.HttpServletRequest接口有两个方法:getSession(boolean)和getSession(). 具体什么区别,跟踪源码分析下,先摆出结论: ...

  4. springboot自定义jmx对象

    在使用springboot-admin对springboot项目进行监控的时候我们发现其是具有web访问jmx对象的功能的,那它内部是怎么实现的呢. Jolokia是一个JMX-http桥梁,它提供了 ...

  5. 本地docker镜像上传到腾讯云镜像仓库。

    和上篇上传到Docker Hub类似,只是登录时切换成腾讯云镜像仓库地址(ccr.ccs.tencentyun.com/longdbtencentdocker/publongdb)即可. docker ...

  6. OpenERP中自定义模块卸载失败，Postgres数据库删不掉数据库，OpenERP登录不了一直在加载的问题解决方案。

    解决方案也就是删除掉不用的数据库,OE会提示当前有N个Session不让Drop数据库. 对于Postgres 9.1 版本,在pgAdmin中查询以下语句: SELECT pg_terminate_ ...

  7. Nginx PHP fpm forbidden 原因

    可能是标红目录层级不一致 location / { root /var/www/html/public; index index.php; } location ~ \.php$ { root /va ...

  8. JVM-类加载过程(Java类的生命周期)

    什么是类加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对象,用来封装类在方法区内的数据结构.类的 ...

  9. 浅谈js中的垃圾两种回收机制

    一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...

  10. git 学习之基本概念

    在学习 Git 的时候我们经常会听到工作区,版本库,暂存区.那么这些东西指的是什么呢?本次我们就一起学习一下. 工作区 顾名思义:工作的区域,那么你一般在哪工作呢?当然是你本地可以看到的目录啦! 版本 ...