js返回css样式的color值

短命女 2022-06-17 10:16 795阅读 0赞

今天做百度前端学院的任务时，遇到了一个问题：

--------------------

耀耀学院任务二：  
任务描述  
![表单][task_2_30_1.jpg]  
共5行表单  
要求:  
表单获得焦点时，下方显示表单填写规则  
表单失去焦点时校验表单内容  
**校验结果正确时，表单边框显示绿色**，并在下方显示验证通过的描述文字  
**校验结果错误时，表单边框显示红色**，并在下方显示验证错误的描述文字  
**点击提交按钮时，对页面中所有输入进行校验**，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”

--------------------

校验对错的任务都完成了，我遇到的问题是点击按钮对页面中所有进行校验。  
**我的思路是，既然要求是全对才通过，那么就是表单边框全为绿色（我用的是’\#90ee90’）那就是全对了，那我就对表单颜色进行判定。**

我是这样做的

var flag=(input[0].style.borderColor=="#90ee90"&&input[1].style.borderColor=="#90ee90"&&input[2].style.borderColor=="#90ee90"&&input[3].style.borderColor=="#90ee90"&&input[4].style.borderColor=="#90ee90");
    if(flag){
        alert("提交成功");
    }else{
        alert("提交失败");
    }

但是结果总是**提交失败**，不论表单填写的内容是否对错。  
这就意味着flag始终都是false。  
为什么呢？  
我使用`alert(input[0].style.borderColor);` 弹出了结果

rgb(144, 238, 144)

然后我就查了一下：  
**js返回的color是rgb()或者rgba()格式的。**  
然而，要是你定义的`color="red";`呢？  
。  
。  
。  
附上[任务源码][Link 1]，有一个部分忘记做了，全局验证的时候没有让边框的颜色变成红色。。。  
[页面演示在这里。][Link 2]

[task_2_30_1.jpg]: http://7xrp04.com1.z0.glb.clouddn.com/task_2_30_1.jpg
[Link 1]: https://github.com/1091214370/baidu/blob/master/yaoyao/formTest2/formtest2.html
[Link 2]: http://119.29.199.85/baidu/yaoyao/formTest2/formtest2.html