老师，我找到上个问题的原因了，但是这个为什么？
来源：3-8 编程练习
慕桂英7176016
2020-06-01 23:40:17
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red{
border:1px solid red;
}
.tips{
display:none
}
.blank{
margin-right:10px;
}
</style>
</head>
<body>
姓名：<input id= "nameblanks" type="text" >
<div id="tip" class="tips">请输入您的姓名</div>
<script type="text/javascript">
// 补充代码
var nameblank=document.getElementById("nameblanks");
//document.write("<br/>"+nameblanks)
var tip=document.getElementById("tip");
//document.write("<br/>"+tip)
nameblank.onfocus=function(){
tip.style.display='inline-block'
}
nameblank.onblur=function(){
//输入框的value值 很奇怪 为什么我这里设置className就不行，必须要设置style.display='none'? 我也尝试将下面代码都注释掉，仅显示onfocus和onblur，但是这里一设置className,光标离开时候的触发的样式就不生效，什么原因？
tip.style.display="none";
// tip.className="tips";
//判断输入框是否为空
if(this.value==""){
tip.innerHTML='用户名不能为空'
nameblank.className="red"
tip.style.display='inline-block'
}
else{
tip.className='tips';
//这里用tips就可以呢为什么
nameblank.style.border="1px solid black"
}
}
</script>
</body>
</html>
1回答
-
同学你好，关于你的问题，回答如下：
1、这里是因为在获取焦点的时候，使用的是style设置显示。
这个设置是直接添加到html标签中的，如下这种。这个时候，就相当于有两个显示的样式，一个通过类在css中添加，一个是通过js，直接添加到html标签中。
然后下面失去焦点，通过改变类的。只是去掉类中的。但是标签中还有个，所以还是显示。
但是通过style.display设置隐藏的话，直接改变的是标签中的。标签中的是隐藏，类中的样式是显示，但是标签中的优先级比较高，所以还是隐藏的。
2、下面使用类改变有效是因为上面已经改变了标签中的，若是不改变标签中的，还是无效的哦。
3、建议：这里保持一致，若是使用style改变标签中的，就全部改变标签中的，若是使用类名改变样式，就全部使用类名哦，例：
4、不过这样，会导致不在一行显示，可以开始再给div设置给行内块或者直接使用span元素，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题