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

【问题标题】：How can you change the color of a label in a form?如何更改表单中标签的颜色？
【发布时间】：2014-03-28 18:41:53
【问题描述】：

我有以下代码，

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？

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

【问题讨论】：

你可以简单地通过使用 CSS 来实现 - jsfiddle.net/WEBpe 你真的想专门使用 JS 吗？
是的，当用户尝试提交表单以更改字段以提醒他们为空字段时，会触发 javascript。我已经尝试过 require，但它在 Safari 中不起作用。
@Pravin Waychal ：当没有javascript的字段无效时，是否可以更改标签颜色。尝试了不同的选项，无法实现。
@user1645290 检查此html5doctor.com/css3-pseudo-classes-and-html5-forms 例如输入：必填+标签{颜色：红色；我不这样做，所以在 css 中有方法可以将样式放在前一个元素上，因此对于这种情况，标签应该在输入之后

标签： javascript css forms styles

【解决方案1】：

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

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

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

【讨论】：

使用类来改变颜色通常是最好的主意。因为您可以调整 css 而不是 javascript 代码。我也建议使用 jQuery 框架。

【解决方案2】：

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

【讨论】：

这不是 OP 想要的，他想要一些程序化的东西，例如在相应字段无效时将标签颜色设置为红色
你是对的！我回答时问题尚未编辑。

【解决方案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。在此演示中，您只需尝试单击页面即可查看它的实际效果。

【讨论】：

【解决方案4】：

这一切都取决于您的用例。如果您只是尝试静态设置元素红色样式，则应定义一个 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

【讨论】：

【解决方案5】：

使用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";

【讨论】：

注意，你的“javascript”不是javascript，而是jquery。你应该注意到，特别是因为 OP 没有提到 jquery（另外，为什么 OP 下载一个 100kb 的文件只是为了操纵一个样式？？）
此代码只是一个示例，您可以从服务器添加 jquery。我已经编写了 3 个选项来制作它，它可以使用 CSS 以及核心 JAVASCRIPT 来完成......但通常所有设计师都使用 jquery 来获得更多的舒适感。 :)
@Tirthrajsinh Parmar：当元素无效时如何使用 css 选项。

【解决方案6】：

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

【讨论】：