老师,当失去焦点时出了问题

老师,当失去焦点时出了问题

 当失去焦点时如果这么写就没问题,颜色会变$(this).css({'outline':'1px solid green'});

可是这么写就变不了色为什么??$(this).css({'outlineColor':'green'});


<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>习题</title>

</head>


<body>

    <input type="text" value=""><span></span>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>

        $('input').focus(function(){

            $('span').text('请输入内容');

            $(this).css({'outlineColor':'blue'});

        })

        $('input').blur(function(){

            if($(this).val() !=''){

                $(this).css({'outline':'1px solid green'});

                $('span').text('Correct!');

            }else{

                $(this).css({'outlineColor':'red'});

                $('span').text('请完善表单!');

            }

        })

   

    </script>

</body>


</html>


正在回答

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

1回答

同学你好,问题解答如下:

失去焦点时,事件是起作用了的,如下:

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

而样式没有起作用的原因是,失去焦点时,input的outline-style这个属性被去掉了,而轮廓线outline,在缺少outline-style(轮廓的样式)属性时,不会显示轮廓。可在样式中添加如下代码,保证元素始终有outline-style属性:

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

另外建议同学将outline换成border属性,因为border属性更常用。

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

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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