JS元素属性切换的几种方法

初学前端，练习时遇到很多涉及JS元素属性切换的问题，例如鼠标移过改变背影颜色、字体颜色，点击按钮某块显示或隐藏等，简单总结几个方法。

1.JS实现

//鼠标移入移出
object.onmouseover=function(){};
object.onmouseout=function(){};
//点击按钮使某模块显示或隐藏
var oH2 = document.getElementsByTagName("h2")[0];
	var oUl = document.getElementsByTagName("ul")[0];
	oH2.onclick = function ()
	{
		var style = oUl.style;
		style.display = style.display == "none" ? "block" : "none";
		oH2.className = style.display == "none" ? "open" : ""
	}

链接: link.
2.jQuery实现

$('p').mouseover(function);
$('p').mouseout(function);

或

$('p').mouseover().mouseout();

或

$('p').hover(function(),function());

//点击按钮使某模块显示或隐藏
//toggle()可切换元素的显示与隐藏状态
$(".button1").click(function(){
  $("p").toggle();
  });

//还可以自己定义toggle函数，实现更复杂的状态
$('.music').toggle(
        function () {
            $(this).css('display','none');
            $('.menu').css('border-bottom','black');
        },
        function () {
            $(this).css('display','block');
            $('.menu').css('border-bottom','white')
        }
    );
    $('.menu').on('click',function () {
        $('.music').toggle();
    });

3.CSS hover选择器

p{color:red;}
p:hover{color:blue;}

还可以在默认属性和所需属性间切换

a.hover,a.active{color:red;}
a.visited,a.link{text-decoration:none;}