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. [Flex] 组件Tree系列 —— 运用variableRowHeight和wordWrap设置可变行高

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:运用variableRowHeig ...

  2. [实战] 给现有的NGINX二进制RPM包加新模块

    [实战] 给现有的NGINX二进制RPM包加新模块 一.前言 在做 wiki 的镜像,这样以后文章就可以使用外链了(链接直接跳转墙内小站). 遇到的问题就是:我的 NGINX 包安装的时候图方便采用 ...

  3. java程序向hdfs中追加数据,异常以及解决方案

    今天在学习hdfs时,遇到问题,就是在向hdfs中追加数据总是报错,在经过好几个小时的努力之下终于将他搞定 解决方案如下:在hadoop的hdfs-sit.xml中添加一下三项 <propert ...

  4. Eclipse中的创建maven项目，无法添加src/main/java等source folder

    maven无法添加src/main/java 通过Eclipse创建Java Web项目,目录结构如下: 默认是只有src/main/resources 这个source folder 按照maven ...

  5. UI1

    计算机工程系     目 录   实验一 Photoshop基本界面熟悉 3 实验二 PhotoShop常用工具的使用 4 实验三 图象和图层的处理 7 实验四 各种滤镜方式的处理 13 实验五 Ph ...

  6. 获得自己电脑的SSH公匙

    关于什么是SSH请点击此"www.Baidu.com”网站了解 我这里只说怎么获取属于自己电脑的SSH公匙 本人是Win10电脑 所以相对来说简单一点  点击win ->选择设置-&g ...

  7. res/raw与assets目录的区别

    1.相同点: 两者都会原封不动的保存在apk包中,不会被编译成二进制码. 2.不同点: raw目录下只能存放文件,不能存放下一级的文件夹,而assets可以存放下一级的文件夹. raw目录下的资源会映 ...

  8. Cloudera Manager安装之利用parcels方式（在线或离线）安装3或4节点集群（包含最新稳定版本或指定版本的安装）（添加服务）（Ubuntu14.04）（五）

    前期博客 Cloudera Manager安装之Cloudera Manager 5.6.X安装(tar方式.rpm方式和yum方式) (Ubuntu14.04) (三) 如果大家,在启动的时候,比如 ...

  9. WPF Convert使用

    在存在基本数据缓存时,可以传入一个数据库中的数据唯一标识码,然后利用自己编写的Convert类,这个Convert类必须实现IValueConverter接口,进行转换,在进行转换的过程中,可以从基本 ...

  10. php能力自测

    最近整理些PHP方面的问题,PHPer可自测自身的功底如何! 查看更多问题 php运行模式 php有几种主要的运行模式?分别使用在那些场景下? gi与fastcgi有什么不同?他们的优缺点有哪些? 如 ...