JS点击
程序员文章站
2023-11-25 09:45:10
本来是想做一个鼠标点击事件：A,B两个东西，B先隐藏，点击A，B出现，再点一次A，B消失，然后发现在判断不同的情况下，出现了一点小问题 暂时没有问题的写法： 然后，我把它的判断条件改了一下,其实这是我第一次写的想法： 然后它的效果是，第一次点击的时候没有反应，要点第二次，B才会出来，有点不明白 ......
本来是想做一个鼠标点击事件：a,b两个东西，b先隐藏，点击a，b出现，再点一次a，b消失，然后发现在判断不同的情况下，出现了一点小问题
暂时没有问题的写法：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>document</title>
6 <style type="text/css">
7 #div1{
8 width: 50px;
9 height: 200px;
10 background-color: orange;
11 display: none;
12 }
13 </style>
14 <script type="text/javascript">
15 function showhide(){
16 var a=document.getelementbyid("div1")
17 if (a.style.display=="block") {
18 a.style.display="none";
19 }
20 else{
21 a.style.display="block";
22 }
23 }
24 </script>
25 </head>
26 <body>
27 <input type="button" value="显示隐藏" onclick="showhide()">
28 <div id="div1"></div>
29 </body>
30 </html>
然后，我把它的判断条件改了一下,其实这是我第一次写的想法：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>document</title>
6 <style type="text/css">
7 #div1{
8 width: 50px;
9 height: 200px;
10 background-color: orange;
11 display: none;
12 }
13 </style>
14 <script type="text/javascript">
15 function showhide(){
16 var a=document.getelementbyid("div1")
17 // 这里改变了
18 if (a.style.display=="none") {
19 a.style.display="block";
20 }
21 else{
22 a.style.display="none";
23 }
24 }
25 </script>
26 </head>
27 <body>
28 <input type="button" value="显示隐藏" onclick="showhide()">
29 <div id="div1"></div>
30 </body>
31 </html>
然后它的效果是，第一次点击的时候没有反应，要点第二次，b才会出来，有点不明白
下一篇： js图片裁剪原理（手机*裁剪任意形状）