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. docker微服务部署之：四、安装docker、docker中安装mysql和jdk1.8、手动构建镜像、部署项目

    docker微服务部署之:三,搭建Zuul微服务项目 1.Centos7安装Docker 详见:Centos7安装Docker 2.Docker中安装jdk1.8 详见:使用Docker构建jdk1. ...

  2. HDU-1160-FatMouse's Speed（线性DP，LIS）

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. QuantLib 金融计算——收益率曲线之构建曲线（2）

    目录 QuantLib 金融计算--收益率曲线之构建曲线(2) YieldTermStructure 问题描述 Piecewise** 分段收益率曲线的原理 Piecewise** 对象的构造 Fit ...

  4. 微信小程序之蓝牙 BLE 踩坑记录

    前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE ...

  5. Linux系统编程：进程控制

    一.进程相关操作与编程对应函数 1.进程创建:两种方式来实现. ①fork:创建一个子进程,父子进程共享一份代码程序,但是各有一份独立的数据,为了效率和保持数据的独立采用写时复制技术(COW).运行无 ...

  6. php array_flip() 删除数组重复元素

    在PHP中,用于删除数组中重复元素有一个可用的函数,那就是 array_unique(), 但是它并不是一个最高效的方法,使用array_flip() 函数将比array_uniqure()在速度上高 ...

  7. PHP之string之chr()函数使用

    chr (PHP 4, PHP 5, PHP 7) chr - Return a specific character chr - 返回指定的字符 Description string chr ( i ...

  8. js中字符串的替换

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replac ...

  9. Python基础 - 总则

    学习Python的笔记,有基础语法,有注意点.仅此而已. 目录: ------------------------------------------- Python基础(1) - 初识Python ...

  10. Guava之RateLimiter的设计

    Guava源码中很详尽的解释了RateLimiter的概念. 从概念上看,限流器以配置速率释放允许的请求(permit).如有必要,调用acquire()将会阻塞知道一个允许可用.一旦被获取(acqu ...