Question

我有以下代码，

HTML

<label for="fName">First Name<sup>*</sup></label>
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/>

的JavaScript

var fName = document.getElementById("fName");
fName.label.style.color="red";

这是改变颜色或标签的有效方法，还是需要它自己的ID？

感谢您的帮助！澄清，如果表单提交时字段为空，则需要更改颜色。

Answer 1

您的代码对更改属性color有效。但我不认为你的代码会改变你的标签颜色。如果此元素的此样式是唯一的，则可以使用id作为label并使用相同类型的脚本来更改标签的颜色。我认为如果您在class中定义css并使用JavaScript添加此类名称会很好，接着是代码。

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

如果您可以使用jQuery框架。这将节省大量时间。

Answer 2

看看这个非常完整的答案： Javascript change color of text and background to input value

Answer 3

我相信没有任何简短直接的方法可以使用javascript访问与输入字段对应的附加标签。您可以通过CSS访问附加的标签（在布局中进行一些调整），但在javascript中，您必须设置几行代码。要使用此代码，布局还要求所有附加标签应位于输入字段之前（允许介于两者之间的空格）。此代码只使用DOM元素的previousSibling属性和其他一些DOM内容。这是详细信息：

function getLabelFromInputID(inputID){
   var prevSib = document.getElementById(inputID).previousSibling;
   //remove the spaces if any exists
   while(prevSib.nodeName=='#text') prevSib=prevSib.previousSibling;
   if(prevSib.getAttribute('for') != inputID) prevSib = null;
   return prevSib;
}

使用getLabelFromInputID功能从相应的输入字段ID中访问附加的标签。请注意，标签应正确设置for属性（这是标准和常见做法）。

这是Fiddle Demo。在此演示中，您只需单击页面即可查看其中的操作。

Answer 4

使用css

form label{color:red};

使用javascript

<label for="fName" class="lbl">First Name<sup>*</sup></label>
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js></script>
<script>
    $(document).ready(function() {
       $('.lbl').css('color','red');
    });
</script>

或简单的javascript

document.getElementsByClassName("lbl").style.color="red";

Answer 5

这一切都取决于您的使用案例。如果您只是尝试静态地将元素设置为红色，则应该定义一个css类（例如`red-label {color：red;}）并将该类应用于标签。

如果您尝试将颜色动态设置为红色（例如，在表单验证错误时），则需要使用某种查询选择器来定位标签。

function makeLabelRedDirectly() {
  document.getElementById('fNameLabel').style.color = 'red';
}

function makeLabelRedViaClass() {
  // Note you can use the more robust `element.classList` with modern browsers
  // document.getElementById('fNameLabel').classList.add('red-label');
  document.getElementById('fNameLabel').className += ' red-label' ;
}

上面的示例使用document.getElementById来定位元素。您也可以选择使用document.querySelector或jQuery等库来定位标签。

工作示例：http://jsbin.com/calol/1

Answer 6

input元素没有label属性或其他方式直接引用其标签。您需要为id元素分配label或以其他方式找到访问它的方法。您可以遍历网页上的所有label元素，并使用for属性与input元素匹配的元素，但可能更容易使用id。< / p>

如何更改表单中标签的颜色？

6 个答案: