改变菜单颜色

最新推荐文章于 2021-02-16 02:49:44 发布

原创最新推荐文章于 2021-02-16 02:49:44 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #div #null

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

该博客介绍了改变二层嵌套div结构菜单颜色的功能。第一层div的id为mnpMenuTop，第二层div的className为mnpMenuRow。通过定义多个函数，实现了鼠标移上、移出、放下时菜单颜色的变化，还对之前的菜单状态进行了还原处理。

/**
* 功能:
* 改变菜单颜色
* 用法:
* 应用于一个二层的嵌套的div 结构
* 第一层的div id应为 mnpMenuTop
* 第二层的div 为菜单项，className 为 mnpMenuRow
* 作者:
* KingApex
*最后更新日期:
* 2005-4-5
*/

var mnpMenuTop = null;
var tempMenu = null;
var overcolor ="#F4f4f4"; //鼠标移上颜色
var outcolor = "#FFFFFF"; //鼠标移出颜色
var downcolor = "#CCCCCC";//鼠标放下颜色

window.attachEvent("onload", mnpMenuInit);

function mnpMenuInit()
{
mnpMenuTop = document.getElementById("mnpMenuTop");
mnpMenuAttach(mnpMenuTop);
}

function mnpMenuAttach(el){
  var divs = el.getElementsByTagName("DIV");

  var count = divs.length;

  for (var i =0;i<count ;i++ )
  {
   var div = divs.item(i);
   if (div.className == "mnpMenuRow"){
    div.attachEvent("onmouseenter", mnpMenuMouseover);
    div.attachEvent("onmouseleave", mnpMenuMouseout);
    div.attachEvent("onmousedown", mnpMenuMousedown);
    div.setAttribute("flag", "0");
   }
  }

}

function mnpMenuMouseover(){
var div = window.event.srcElement;
if(div.getAttribute("flag") != "1"){
div.style.background = overcolor;
}
}

function mnpMenuMouseout(){
var div = window.event.srcElement;
if(div.getAttribute("flag") != "1"){
div.style.background =outcolor;
}
}

function mnpMenuMousedown(){

if(tempMenu != null){
//把以前的菜单还原
tempMenu.setAttribute("flag", "0");
tempMenu.style.background = outcolor;
}

var div = window.event.srcElement;
div.setAttribute("flag", "1"); //鼠标放下了
div.style.background = downcolor;
tempMenu = div;
}