图片位置编辑器显示代码有问题,老师帮我答疑

图片位置编辑器显示代码有问题,老师帮我答疑

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>onblur和onfocus</title>
   <style type="text/css">
       .red{
           border:1px solid red;
       }
   </style>
</head>
<body>
姓名:<input type="text"> <span></span>
<script type="text/javascript">
   // 补充代码
   var input=document.getElementsByTagName("input")[0];
   var span=document.getElementsByTagName("span")[0];
   var onInput=function () {
       span.innerHTML="请输入您的姓名"
   };
   input.onfocus=onInput;


   var outInput=function () {
       if (this.value==""){
           span.innerHTML="用户名不能为空";
           this.className="red"
       }else {
           span.innerHTML='';
           this.className=""
       }
   };
   input.onblur=outInput;
</script>
</body>
</html>


http://img1.sycdn.imooc.com//climg/5e78601d091eb4ff08190737.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2020-03-23 19:02:00

同学你好,老师这里是如下颜色

http://img1.sycdn.imooc.com//climg/5e78958409b2899902900132.jpg

这个是编辑器的主题颜色。设置不同显示的就不同,没有影响的。

祝学习愉快~

好帮手慕糖 2020-03-23 16:47:52

同学你好,关于同学的问题,回答如下:

1、this.className = "red"是给当前元素添加一个名为red的类。这个类在css中有设置好样式,设置边框为红。所以内容为空的时候,设置input的边框为红色的。

http://img1.sycdn.imooc.com//climg/5e78772f09ccc45803310110.jpg

2、this.className = ""是设置类名为空,可以理解为去掉了之前添加的red的类,那么就不能使用red的样式了,边框就变回默认颜色了。

3、所以这里是通过改变类名的方式,设置input边框的变化。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

  • 提问者 大师兄js #1
    我的意思是:编辑器为什么显示className为浅灰色(一般是我在声明一个变量,而后面没有用到这个变量时才会显示灰色)
    2020-03-23 17:09:51
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师