21 事件应用

最新推荐文章于 2024-07-12 16:27:40 发布

qingshui_913

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量99

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_59809997/article/details/123311173

版权

Javascript学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

需求：点击显示隐藏

<style>
    .dv{ //设置样式
        width: 200px;
        height: 200px;
        color: pink;
    }
</style>
</head>
<body>
  <input type="button" value="隐藏" id="btn">
  <div id="dv"></div>
  <script>
    var btn = document.getElementById("btn"); //获取到按钮标签
    btn.onclick = function(){
        if(this.value == "隐藏"){ //当点击是value为隐藏样式为none
            document.getElementById("dv").style.display = "none";
            this.value = "显示"; //并且改变value的值为显示
        }else if(this.value == "显示"){
            document.getElementById("dv").style.display = "block";
            this.value = "隐藏";
        }
    }
  </script>
</body>

封装一个外部文件为publick.js，获取标签

function my$(id){ //设计一个函数首先考虑参数和返回值
    return document.getElementById(id);
}

内部链接为：

<script src = "publick.js"></script>

排他思想
1.点击某一按钮所有都变为0
2.让自身的this变为1

<body>
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
  <script>
    var btnObjs = document.getElementsByTagName("input"); //获取到所有的input标签  伪数组
    //第一层循环获取到所有的input，分别再做点击事件
    for(var i = 0; i < btnObjs.length; i++){ //对每个input做点击事件
        btnObjs[i].onclick = function(){
            for(var j = 0; j <btnObjs.length; j++){
                btnObjs[j].value ="0"; //把所有的标签变为0
            }
            this.value = "1"; //让自身变为1
        }
    }
  </script>
</body>

需求：修改表单value属性

<body>
   <input type="button" id="btn" value="按钮">
 <script>
   var btn = document.getElementById("btn");
   btn.onclick = function(){
       this.value = "我被修改了"; //修改value值
       this.type = "text"; //修改类型
       this.id = "btn2"; //修改id
   }
 </script>
</body>

需求：修改单选按钮

<input type="button" id="btn" value="修改性别">
<input type="radio" name="sex">男
<input type="radio" name="sex" id="rad1">女
<input type="radio" name="sex">保密
 <script>
  var btn = document.getElementById("btn");
  btn.onclick = function(){
      document.getElementById("rad1").checked = "true"; //点击默认选择女 转换为布尔型可以为任意字符，最好为true
  } 
 </script>

需求：点击默认下拉菜单选菜

<input type="button" value="选菜" id="btn">
 <select name="city" id="cd">
  <option value="粤菜" id="yc">粤菜</option>
  <option value="川菜" id="cc">川菜</option>
  <option value="东北菜" id="dbc">东北菜</option>
  <option value="湘菜" id="xc">湘菜</option>
  <option value="淮扬菜" id="hyc">淮扬菜</option>
 </select>
<script>
  var btn = document.getElementById("btn");
  btn.onclick = function(){
      var hyc = document.getElementById("hyc");
      hyc.selected = true;
  }
</script>

设置样式

<style>
    .dv{
        width: 200px;
        height:200px;
        color: pink;
    }
</style>
</head>
<body>
<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
 <script>
   var btn = document.getElementById("btn");
   btn.onclick = function(){
       var dv = document.getElementById("dv");
       dv.style.width = "300px";
       dv.style.height = "300px";
       dv.style.color = "pink";
   }
 </script>
</body>

优化：在js代码中操作DOM的时候，我们可以设置元素的类样式而不用class用className

document.getElementById("dv").className = "cls";

练习：className

 <style>
    div{
        width: 300px;
        height: 200px;
        background: hotpink;
    }
    .cls{
        display: none;/*这个类就表示隐藏*/
    }
</style>
</head>
<body>
<input type="button" value="隐藏" id = "btn">
<div id="dv"></div>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        // 判断有没有这个cls类
        if(document.getElementById("dv").className != "cls"){//表示这个类不存在。那么我们就可以给他加这个类
        // 我们让他有这个类，有这个cls类他就隐藏了
          document.getElementById("dv").className = "cls";//此时就是隐藏，因为加了一个隐藏的类
          this.value = "显示";
        }else{
            document.getElementById("dv").className = "";//此时就是显示了，因为把这个异常类清除掉了
            this.value = "隐藏";
        }
    }
</script>
</body>

qingshui_913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21 事件应用

需求：点击显示隐藏<style> .dv{ //设置样式 width: 200px; height: 200px; color: pink; }</style></head><body> <input type="button" value="隐藏" id="btn"> <div id="dv"></div> <script>
复制链接

扫一扫