javascript简单弹出层-优快云博客

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个按钮点击事件，通过此事件可以控制一个div元素的显示与隐藏。样式设定简洁明了，易于理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <title>disabled</title>
5 <style type="text/css">
6 *{margin:0px;padding:0px}
7 .button{border:1px solid #950074;width:180px;height:24px;line-height:24px;text-align:center;font-size:12px}
8 </style>
9 <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
10 <script type="text/javascript">
11 window.onload=function()
12 {
13 var getButton=document.getElementsByTagName('input')[0];
14 var getDiv=document.getElementsByTagName('div')[0];
15 var dragging=true;//设置状态；
16 getDiv.className="button";//动态添加CSS样式；
17 getButton.onclick=function()
18 {
19 if(dragging==true)
20 {
21 getDiv.style.display="none";
22 this.value="显示文字"
23 return dragging=false;
24 }
25 else
26 {
27 getDiv.style.display="block";
28 this.value="隐藏文字"
29 return dragging=true;
30 }
31 }
32 }
33 </script>
34 </head>
35 <body>
36 <div>
37 <p>我的内容是文字！！<p>
38 </div>
39 <input type="button" value="隐藏文字">
40 </body>
41 </html>

总结：

设置状态是否为显示；

转载于:https://www.cnblogs.com/mizzle/archive/2010/11/10/1873923.html