JS01

A.了解js

1 点击事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
     <style>
           div{
             width: 100px;
             height: 100px;
             background: red;

           }
      </style>
</head>
<body>
   <div id="demo"></div>
 
 <script type="text/javascript">
      // 获取元素通过ID的方式
     var a = document.getElementById("demo")
        // 绑定这个点击事件
         // (绑定点击事件,然后执行)
        a.onclick = function () {
              // 执行的任务
            a.style.width="200px";
            a.style.height="200px";
            a.style.background="yellow"
        }
 </script>
</body>
</html>
!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<input type="text" id="int"  value="我是文本框 来点我">
<input type="button" id="btn" value="点击弹出文本框内容">

 <script type="text/javascript">
    // 获取事件
      var a = document.getElementById("int");
      var b = document.getElementById("btn");
       b.onclick=function(){
          alert(a.value)
       }
      

 </script>

</body>
</html>

3 .onmouseover

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
         *{
            padding: 0;
            margin:0;
         }
          div{
              width: 200px;
              height: 100px;
               background:red;
          }
     </style>
</head>

<body>
    <input type="button" id="btn" value="碰我你就消失">
    <div id="dd">
    </div>
    <script type="text/javascript">
        var a= document.getElementById("dd");
        var b= document.getElementById("btn");
         var  c="none"
              d="block"
         b.onmouseover=function(){
               a.style.display= c;
                
                var e=c;
                    c=d;
                   d= e     

                                        
         }




  </script>
  
</body>
</html>

B.

C.

 laoshizhenrangrenshiwang
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容