标签：
在JS中改变CSS样式，一般是通过鼠标或者键盘事件触发调用函数来实现CSS样式的改变，采用“className.style.stylename="";”来实现，例如
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程挑战</title> <link rel="stylesheet" type="text/css" href="style/DOM.css"> <script type="text/javascript" src="js/DOM.js"></script> </head> <body> <div id="divselect"> <cite>请选择分类</cite> <ul> <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> <li><a href="javascript:;" selectid="2">.NET开发</a></li> <li><a href="javascript:;" selectid="3">PHP开发</a></li> <li><a href="javascript:;" selectid="4">Javascript开发</a></li> <li><a href="javascript:;" selectid="5">Java特效</a></li> </ul> </div> </body> </html>
1 body,ul,li{ 2 margin:0; 3 padding:0; 4 font-size:13px; 5 } 6 7 ul,li{ 8 list-style:none; 9 } 10 11 #divselect{ 12 width:186px; 13 margin:80px auto; 14 position:relative; 15 z-index:10000; 16 } 17 18 #divselect cite{ 19 width:150px; 20 height:24px; 21 line-height:24px; 22 display:block; 23 color:#807a62; 24 cursor:pointer; 25 font-style:normal; 26 padding-left:4px; 27 padding-right:30px; 28 border:1px solid #333333; 29 background:url(xjt.png) no-repeat right center; 30 } 31 32 #divselect ul{ 33 width:184px; 34 border:1px solid #333333; 35 background-color:#ffffff; 36 position:absolute; 37 z-index:20000; 38 margin-top:-1px; 39 display:none; 40 } 41 42 #divselect ul li{ 43 height:24px; 44 line-height:24px; 45 } 46 47 #divselect ul li a{ 48 display:block; 49 height:24px; 50 color:#333333; 51 text-decoration:none; 52 padding-left:10px; 53 padding-right:10px; 54 }
现在能够得到如下页面：
而我们想实现点击选择框的时候能够弹出下拉菜单的效果，可以在js中使用如下代码：
window.onload=function(){ var box=document.getElementById(‘divselect‘), title=box.getElementsByTagName(‘cite‘)[0], menu=box.getElementsByTagName(‘ul‘)[0], as=box.getElementsByTagName(‘a‘), index=-1; // 点击三角时 title.onclick=function(event){ event=event||window.event; if (event&&event.stopPropagation) { event.stopPropagation(); }else{ window.event.cancelBubble=true; } menu.style.display="block"; // 执行脚本 }
在非IE浏览器中，使用event.stopPropagation()方法来阻止事件冒泡，在IE浏览器中，使用event.cancelBubble=true属性来阻止事件冒泡~
标签：
原文地址：http://www.cnblogs.com/sky5786/p/5782609.html
