js中获取css样式的两种方式

时间：2023-03-08 16:07:53

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>

相关文章