zoukankan      html  css  js  c++  java
  • js中获取css样式的两种方式

    1. 对象.style.样式名 

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

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


    最好用第二种方式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <style type="text/css">
            #box{
                 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>
  • 相关阅读:
    12月10日,小雪
    12月10日,小雪
    BUG
    Twenty Hours
    BUG
    07中华小姐大赛落幕 20岁佳丽曾光夺冠
    Twenty Hours
    jeecg 页面标签规则
    jeecg导入备份
    jeecg查询分页
  • 原文地址:https://www.cnblogs.com/Ryan777/p/10401236.html
Copyright © 2011-2022 走看看