JS中改變CSS樣式以及阻止冒泡總結

本文轉載自查看原文 2016-08-18 08:36 3004 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屬性來阻止事件冒泡~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js冒泡，阻止冒泡如何在js中動態改變style樣式和css樣式 js阻止冒泡 js阻止事件冒泡 js阻止事件冒泡 js中阻止事件冒泡的幾種方法 js阻止冒泡和取消事件 JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡 jQuery中添加/改變/移除改變CSS樣式例子 JS與CSS阻止元素被選中及清除選中的方法總結