js对样式的操作

 

本文有:对某个事件的来回操作实现对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的时候

 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的标签代码段;

 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';

            }

鼠标未覆盖

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

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

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;
                }

            }

 

未点击:

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

 

posted @ 2019-06-04 21:14  马昌伟  阅读(377)  评论(0编辑  收藏  举报