JS中改变CSS样式以及阻止冒泡总结

在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属性来阻止事件冒泡~

posted @ 2016-08-18 08:36  麦芒微笑  阅读(4784)  评论(0)  编辑  收藏  举报