P215
用户名显示隐藏内容（边框变色）
<body>
<div class="box">
<input type="text" value="邮箱/ID/手机号" id="text">
<input type="button" value="登录" id="btn">
</div>
<script>
//获取元素
var text = document.querySelector('input');
//注册事件 获得焦点事件
text.onfocus = function(){
if(this.value === "邮箱/ID/手机号" ){
this.value = '';
}
this.style.outline = 'none';//input框在使用border进行修改样式时，在点击时，周围会出现外框颜色覆盖的现象，加上outline=none边框外围颜色就不会显示了
this.style.border = '1px solid pink';
}
text.onblur = function(){
if(this.value === "" ){
this.value = '邮箱/ID/手机号';
}
this.style.border = '1px solid green';
//this.style.backgroundColor = 'blue';
}
</script>
</body>
<i> 标签制作小图标原因：icon
cursor:pointer;//光标放上去发生变化
关闭广告
CSS部分
<style>
.box{
border: 1px solid black;
width: 260px;
最低0.47元/天 解锁文章
扫一扫
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
