js对样式的操作

Myth丶恋晨 2022-01-06 20:07 273阅读 0赞

本文有：对某个事件的来回操作实现对css样式的来回修改 。比如实现hover效果

<!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>

1、

1.1

没有js的时候

![1286512-20190604203234131-1380262586.png][]

1.2

鼠标经过图，让图变绿，字体变大。使用js修改css样式

![1286512-20190604203526107-1781261660.png][]

1）获取事件源，事件源就是要修改css的标签代码段；

2）绑定事件 对象.onmouseover =function()\{\} 匿名函数。

3）匿名函数中对象.样式.属性=‘新值’ ，修改颜色和字体。属性带-的去掉-并将-后第一个字母大写。驼峰体。

上面的改变就回不去了，只有刷新网页才能变回原来的样子。

1.3、两段代码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';
    
                }

鼠标未覆盖

![1286512-20190604205454772-1145407603.png][]

鼠标覆盖，能实现不断的切换了。

![1286512-20190604210245020-346971119.png][]

1.4、但是这里有代码冗余。修改一下，加个标志，

未点击：

![1286512-20190604211020864-160970141.png][]

点击。能实现每次点击实现颜色切换

![1286512-20190604211053208-1786572831.png][]

转载于:https://www.cnblogs.com/machangwei-8/p/10976251.html

[1286512-20190604203234131-1380262586.png]: /images/20211227/a474605d85eb4c96a74192ce84045457.png
[1286512-20190604203526107-1781261660.png]: /images/20211227/daf500dbb08b4c0190a463c925b5758f.png
[1286512-20190604205454772-1145407603.png]: /images/20211227/4ef0e176135b474683aae34856fdf8cd.png
[1286512-20190604210245020-346971119.png]: /images/20211227/4ad50f617bca4ef79d89480e65a247bc.png
[1286512-20190604211020864-160970141.png]: /images/20211227/914ccb34c6ee4368a7202e03b7e107ab.png
[1286512-20190604211053208-1786572831.png]: /images/20211227/b6a40a3ae91a4fa98acc0989cda6f2d1.png