JS获得焦点时，className的边框效果无效

最新推荐文章于 2023-11-14 13:06:00 发布

bearWeb

最新推荐文章于 2023-11-14 13:06:00 发布

阅读量708

点赞数

分类专栏： Web 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45090657/article/details/121783691

版权

Web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

做一个练习想实现世纪佳缘网登录框的一个小效果
点击鼠标时，边框为粉色，字体为浅色
在这里插入图片描述

移除鼠标时，边框为浅色，字体为深色
在这里插入图片描述
修改元素的时候边框效果一直无法实现，是因为缺少了
outline:none; 给登录框（ipt）css样式增加即可

   div {
        width: 600px;
        margin: 100px auto;
    }

    .ipt {
        width: 120px;
        height: 23px;
        padding: 0 4px 0 10px;
        outline:none;
    }

    .hd {
        border: 1px solid #ffd6db;
        color: #888;
    }

    .sq {
        border: 1px #d9d9d9 solid;
        color: #333;

    }
</style>

<body>
    <div>
        <input type="text" class="ipt" value="邮箱/ID/手机号">
    </div>

    <script>
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        // 2.注册事件,获得焦点onfocus
        ipt.onfocus = function () {
            if(this.value === '邮箱/ID/手机号'){
                this.style.color = '#888'
                this.value = '';
            }
            this.className = ' ipt hd'//双类名
        }
        // onblur 失去焦点
        ipt.onblur = function () {
            if(this.value === ''){
                this.value = '邮箱/ID/手机号';
            }
            this.className = ' ipt sq';//双类名
        }
    </script>
</body>

bearWeb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS获得焦点时，className的边框效果无效

做一个练习想实现世纪佳缘网登录框的一个小效果点击鼠标时，边框为粉色，字体为浅色移除鼠标时，边框为浅色，字体为加深修改元素的时候一直无法实现，是因为缺少了outline:none; 给登录框（ipt）css样式增加即可 div { width: 600px; margin: 100px auto; } .ipt { width: 120px; height: 23px; padding: 0 4
复制链接

扫一扫

专栏目录