js對樣式的操做

時間 2019-11-10

原文原文鏈接

本文有：對某個事件的來回操做實現對css樣式的來回修改。好比實現hover效果javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">魔降風雲變</div>
        <script type="text/javascript">
            // 1.獲取事件源對象
            // var box = document.getElementById('box');

            // 2.綁定事件
            /* box.onmouseover = function (){
                // 3.讓標籤的背景色變綠

                box.style.backgroundColor = 'green';
                box.style.fontSize = '30px';


            }
            box.onmouseout = function (){
                // 3.讓標籤的背景色變綠

                box.style.backgroundColor = 'red';
                box.style.fontSize = '16px';

            } */
            // var isRed = true;
            // box.onclick = function(){
            //     if(isRed){
            //         this.style.backgroundColor = 'green';
            //         isRed = false;
            //     }else{
            //         this.style.backgroundColor = 'red';
            //         isRed = true;
            //     }

            // }

        </script>
    </body>
</html>

一、css

1.1html

沒有js的時候java

1.2函數

            // 1.獲取事件源對象
            var box = document.getElementById('box');

            // 2.綁定事件
             box.onmouseover = function (){
                // 3.讓標籤的背景色變綠

                box.style.backgroundColor = 'green';
                box.style.fontSize = '30px';


            }

鼠標通過圖，讓圖變綠，字體變大。使用js修改css樣式字體

1）獲取事件源，事件源就是要修改css的標籤代碼段；this

2）綁定事件對象.onmouseover =function(){} 匿名函數。spa

3）匿名函數中對象.樣式.屬性=‘新值’ ，修改顏色和字體。屬性帶-的去掉-並將-後第一個字母大寫。駝峯體。code

上面的改變就回不去了，只有刷新網頁才能變回原來的樣子。htm

1.三、兩段代碼js實現僞類選擇器hover的效果

            // 1.獲取事件源對象
            var box = document.getElementById('box');

            // 2.綁定事件
             box.onmouseover = function (){
                // 3.讓標籤的背景色變綠

                box.style.backgroundColor = 'green';
                box.style.fontSize = '30px';


            }
            box.onmouseout = function (){
                // 3.讓標籤的背景色變綠

                box.style.backgroundColor = 'red';
                box.style.fontSize = '16px';

            }

鼠標未覆蓋

鼠標覆蓋，能實現不斷的切換了。

1.四、可是這裏有代碼冗餘。修改一下，加個標誌，

var box = document.getElementById('box');
            var isRed = true;
            box.onclick = function(){
                if(isRed){
                    this.style.backgroundColor = 'green';
                    isRed = false;
                }else{
                    this.style.backgroundColor = 'red';
                    isRed = true;
                }

            }