给div添加onClick事件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>click_div</title>
 5     <meta charset="utf-8">
 6 
 7     <style type="text/css">
 8         .triangle1{
 9             width: 0;
10             height: 0;
11             border-width: 10px;
12             border-style: solid;
13             border-color: #bbb transparent transparent transparent;
14             /*border-color: transparent transparent #bbb transparent;*/
15             display: inline-block;
16             vertical-align: middle;
17         }
18         .triangle2{
19             width: 0;
20             height: 0;
21             border-width: 10px;
22             border-style: solid;
23             /*border-color: #bbb transparent transparent transparent;*/
24             border-color: transparent transparent #bbb transparent;
25             display: inline-block;
26             vertical-align: middle;
27         }
28         a{
29             width: 116px;
30             height: 20px;
31             margin: 0;
32             padding: 0;
33             font-size: 5px;
34         }
35         .hidden{
36             display: none;
37         }
38         .shown{
39             display: block;
40         }
41     </style>
42 
43     <script type="text/javascript">
44         // 方法一
45         // function change(){
46         //     var mButton=document.getElementById("form_triangle");
47         //     mButton.onclick = function() {        
48         //         if(document.getElementById("form_triangle").className==="triangle1"){
49         //             document.getElementById("form_triangle").className="triangle2"
50         //             document.getElementById("form_a").className="shown"
51         //         }else{
52         //             document.getElementById("form_triangle").className="triangle1"
53         //             document.getElementById("form_a").className="hidden"
54         //         }
55         //             document.body.focus();
56         //     }
57         // }
58         // window.onload=function(){
59         //     change();
60         // }
61 
62         // 方法二
63         function change(){
64             var triangle = document.getElementById("form_triangle");
65             var a = document.getElementById("form_a");
66             if(triangle.className==="triangle1"){
67                 triangle.className="triangle2";
68                 a.style="display: block";
69             }else{
70                 triangle.className="triangle1";
71                 a.style="display: none";
72             }
73         }
74 
75     </script>
76     
77 </head>
78 
79 <body>
80     <div>
81         我已阅读并同意相关服务条款和隐私政策
82         <div id="form_triangle" class="triangle1" onclick="change()"></div>
83         <div id="form_a" class="hidden">
84             <a href="#">《QQ号码规则》</a><br />
85             <a href="#">《隐私政策》</a><br />
86             <a href="#">《QQ空间服务协议》</a>
87         </div>
88     </div>
89 </body>
90 
91 </html>
来源：oschina
链接：https://my.oschina.net/u/4257726/blog/3854726
标签
triangle