1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #box{
8 width: 100px;
9 height: 100px;
10 background: red;
11 /*display: none;*/
12 }
13 </style>
14 </head>
15 <body>
16 <input type="button" name="" id="btn" value="显示" />
17 <div id="box"></div>
18 </body>
19 <script type="text/javascript">
20 var btn = document.getElementById("btn");
21 var box = document.getElementById("box");
22 // 第一种方法
23 btn.onclick = function(){
24 // 只能获取行间样式
25 if(box.style.display == "none"){
26 box.style.display = "block";
27 btn.value = "隐藏";
28 }else{
29 box.style.display = "none";
30 btn.value = "显示";
31 }
32 }
33
34 // 第二种方法
35 btn.onclick = function(){
36
37 if(btn.value == "显示"){
38 box.style.display = "block";
39 btn.value = "隐藏";
40 }else{
41 box.style.display = "none";
42 btn.value = "显示";
43 }
44
45 }
46 // 方法三
47 var isShow = true;
48 btn.onclick = function(){
49 if (isShow) {
50 box.style.display = "block";
51 isShow = false;
52 btn.value = "隐藏";
53 } else{
54 box.style.display = "none";
55 isShow = true;
56 btn.value = "显示";
57 }
58 }
59
60 // 光标移入和移出的时候
61 移入
62 btn.onmouseover = function(){
63 box.style.display = "block";
64 btn.value = "隐藏";
65 }
66 移出
67 btn.onmouseout = function(){
68 box.style.display = "none";
69 btn.value = "显示";
70 }
71
72 // 光标按下和光标抬起的时候
73 // 按下光标
74 btn.onmousedown = function(){
75 方式一 box.style.background = "green";
76 方式二 box.style["background"] = "green";
77 var name = "background";
78 box.style.name = "red";
79 box.style[name] = "red";
80 //对于方式1 不可以使用变量
81 }
82 // 鼠标抬起的时候
83 btn.onmouseup = function(){
84 // box.style.background = "red";
85 box.style["background"] = "green";
86 }
87
88
89 </script>
90 </html>
