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

 

            
                                     
     
      魔降风云变
     
            

 

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

 

未点击：

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