JavaScript1——div点击显示-收起

最新推荐文章于 2023-09-03 17:09:39 发布

遊愙

最新推荐文章于 2023-09-03 17:09:39 发布

阅读量775

点赞数

分类专栏： JavaScript 点击隐藏-显示文章标签： JavaScript onmouseove onmouseout

本文链接：https://blog.csdn.net/baidu_37639000/article/details/70806227

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

点击隐藏-显示

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

    .class2{
      width:100px;
      height:200px;
      border:1px dashed black;
      display:none;
    }
  </style>
  <script type="text/javascript">
  <!--
    function hiden(){
        var d1=document.getElementById("div2");
        if(d1.style.display=="none"){
            d1.style.display="block";
        }else{
            d1.style.display="none";
        }
    }
    function hiden2(){
        var d1=document.getElementById("div2");
        d1.style.display="none";
    }
  //-->
  </script>
  <title>Document</title>
 </head>
 <body>
  <div id="div1" class="" onclick="hiden()" onmouseout="hiden2()">
    我的消息
  </div>
  <div id="div2" class="class2">
    我的消息就是简历没有回复消息o(╯□╰)o
  </div>
 </body>
</html>

【以下是赞不考虑子元素的因素（在子元素中可参考@antzone 的一篇博客 http://www.softwhy.com/forum.php?mod=viewthread&tid=10648 】
此处区别下onmouseout和onmouseover：

onmouseout 鼠标从div中移出时触发事件；

onmouseover 鼠标移入到div中触发事件

模仿上面那位版主自己写的触发计数

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>MouseOver</title>
  <style type="text/css">
    #d1{
      width:100px;
      height:100px;
      border:1px solid;
    }
    .c1{
      background:red;
    }
  </style>
  <script type="text/javascript">
  <!--
    var count=0;
    function testOver(){
      count=count+1;
      var ele_num=document.getElementById("num");
      ele_num.innerHTML=count;

    }
  //-->
  </script>
 </head>
 <body>
  <div id="d1" class="c1" onmouseover="testOver()">

  </div>
  <div id="d2" class="c2">
    触发了<span id="num"></span>次事件

  </div>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    #d1{
      width:100px;
      height:100px;
      border:1px solid;
      background:blue;
    }
  </style>
  <title>MouseOut</title>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var count=0;
     function TestOut(){
       count+=1;
       var ele_num=document.getElementById("num");
       ele_num.innerHTML=count;
     }

 //-->
 </script>
  <div id="d1" class="c1" onmouseout="TestOut()">

  </div>
  <div id="d2" class="c2">
    触发了<span id="num"></span>次事件
  </div>
 </body>
</html>

写个注释：JavaScript里对样式操作和HTML里相同，特例class除外。
比如css要设置好了一个.class1{ }，然后div1需要在触发事件后达到class1的样式：className
【要改变谁的样式就得到那个元素，触发则放在需要达到条件的元素及事件中】

  <div id="div1"> </div>
   <script>
       var ele_div1=document.getElementById("div1");
       ele_div1.className=class1;
   </script>

如果JavaScript脚本在div之前，可以用
windows.οnlοad=function(){
[需要操作的内容/样式变化]
}
此处是匿名函数，此处不再详述（贴上别人详解链接
http://www.softwhy.com/forum.php?mod=viewthread&tid=6191）。

遊愙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript1——div点击显示-收起

.class2{ width:100px; height:200px; border:1px dashed black; display:none;} Document 我的消息我的消息就是简历没有回复消息o(╯□╰)o
复制链接

扫一扫

专栏目录