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. [转] LVM分区在线扩容

    [转] LVM分区在线扩容 在线扩容的这台服务器,LV分区格式为xfs,原大小1.2TB.增加了一块硬盘,大小为1.8TB. fdisk /dev/cciss/c0d1 # 创建分区,并指定分区类型为 ...

  2. Laravel5.5 使用第三方Vendor添加注册验证码

    Laravel5系列的验证码添加通用,使用第三方验证码即可完美实现.这里记录下具体步骤吧,以备不时之需. 第一步:使用composer 安装 验证码库 composer require mews/ca ...

  3. SUSE Linux Enterprise Server设置IP地址、网关、DNS

    说明: ip:202.118.83.247 子网掩码:255.255.255.0 网关:202.118.83.2 dns:8.8.8.8 / 8.8.4.4 1.设置ip $ vi /etc/sysc ...

  4. 学习react教程

    网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...

  5. appium+python 存在多个类时，不用每次都初始化解决办法

    appium+python写自动化测试用例时,为了代码的可维护性,分成不同的类是很常见的办法, 但是在运行时,每一个类都要初始化一次,即每次都会重启应用,这很麻烦,通过__new__可进行多个类之间的 ...

  6. 【杂题】[LibreOJ 2541] 【PKUWC2018】猎人杀【生成函数】【概率与期望】

    Description 猎人杀是一款风靡一时的游戏"狼人杀"的民间版本,他的规则是这样的: 一开始有 n个猎人,第 i 个猎人有仇恨度 wi.每个猎人只有一个固定的技能:死亡后必须 ...

  7. 九省联考 2018 Day 1 复现

    前言 今年省选还有 15 天.每天针对性刷题学知识点有点枯燥,想到真题还没刷,就对着 pdf 做了一遍. A. 一双木棋 去年省选得了 25,应该是 \(n=2,m=2\) 的贪心和 \(m=1\) ...

  8. lightgbm调参方法

    gridsearchcv: https://www.cnblogs.com/bjwu/p/9307344.html gridsearchcv+lightgbm cv函数调参: https://www. ...

  9. Mac下使用Wine安装文件内容搜索工具Search and Replace

    下载: (链接: https://pan.baidu.com/s/1mij7WX6 密码: xsu8) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  10. (转)一张图学会Dockerfile

    原文:http://blog.51cto.com/kusorz/1942816 前言 Dockerfile是非常容易学的,和SHELL相比那简单的太多了. Dockerfile是为快速构建docker ...