3 切换明暗文

最新推荐文章于 2024-07-20 18:16:53 发布

梦蓝星海

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量67

点赞数 1

分类专栏：案例集结文章标签：前端 javascript html

本文链接：https://blog.csdn.net/ffghcgg/article/details/127075349

版权

案例集结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一 css部分

  <style>
        div{
            position: relative;
            width: 200px;
            height: 30px;
            background-color: yellow;
        }
        input{
            width: 200px;
            height: 30px;
            background-color: pink;
        }
        span{
            position: absolute;
            right: 0;
            top: 8px;
         cursor: pointer;
        }
    </style>

二html

 <div>

        <input type="text" placeholder="密码">

        <span>明文</span>

    </div>

三js

// 2获取元素
        var input =document.querySelector('input')
        var span=document.querySelector('span')
        // 3为span添加事件
        span.onclick=function(){
            // 4利用getAttribute('属性名')判断属性值
            if(input.getAttribute('type')=='text'){
                    input.setAttribute('type','password')
                    span.innerHTML='密文'
            
            }else{
                   input.setAttribute('type','text')
                   span.innerHTML='明文' 
            }
        }