如果使用类名填充，则更改输入样式答案

【问题标题】：Change input style if filled using a class name如果使用类名填充，则更改输入样式
【发布时间】：2015-09-03 09:22:29
【问题描述】：

如果填充，我发现小提琴可以更改输入样式。但它正在使用ID。我想使用类名。我使用了document.getElementsByClassName()，但它不起作用。任何人都可以帮忙吗？谢谢。

这里是代码

html

<input type="text" id="subEmail" onchange="checkFilled();"/>

Javascript

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
}
else{
    inputVal.style.backgroundColor = "";
}
}

checkFilled();

这里是Fiddle的链接

【问题讨论】：

标签： javascript jquery html class if-statement

【解决方案1】：

getElementsByClassName() 返回 dom 元素数组，因此您需要使用 inputVal[0] instaed of inputVal

function checkFilled() {
  var inputVal = document.getElementsByClassName("subEmail");
  if (inputVal[0].value == "") {
    inputVal[0].style.backgroundColor = "yellow";
  } else {
    inputVal[0].style.backgroundColor = "";
  }
}

checkFilled();

&lt;input type="text" class="subEmail" onchange="checkFilled();" /&gt;

Document.getElementsByClassName() ：返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以在任何元素上调用 getElementsByClassName()；它将只返回具有给定类名的指定根元素的后代元素。

取自：here

【讨论】：

【解决方案2】：

document.getElementsByClassName("subEmail")

上面将所有具有相同类名的元素作为数组返回。您可能需要获取数组中的第一个元素，例如

document.getElementsByClassName("subEmail")[0]

UPDATED FIDDLE

【讨论】：

【解决方案3】：

我建议传递调用事件的元素的引用。

HTML

<input type="text" onchange="checkFilled(this);"/>

脚本

function checkFilled(elem) {
    elem.style.backgroundColor = elem.value == "" ? "yellow" : "";
}

function checkFilled(elem) {
  elem.style.backgroundColor = elem.value == "" ? "yellow" : "";
}

window.onload = function() {
  checkFilled(document.getElementsByClassName("subEmail")[0]);
}

&lt;input type="text" class="subEmail" onchange="checkFilled(this);" /&gt;

【讨论】：

【解决方案4】：

这是小提琴工作http://jsfiddle.net/2Xgfr/913/

function checkFilled() {
    var inputVals = document.getElementsByClassName("subEmail");

for(var i=0; i<inputVals.length;i++){
    if (inputVals[i].value == "") {
        inputVals[i].style.backgroundColor = "yellow";
    }
    else{
        inputVals[i].style.backgroundColor = "";
    }
    }
}

checkFilled();

还有html

<input type="text" id="subEmail" class="subEmail" onchange="checkFilled();"/>

我使用了一个 for 循环，所以你可以有多个字段。

【讨论】：