javascript 如何更改表单中标签的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22720769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can you change the color of a label in a form?
提问by trinathon
I have the following code,
我有以下代码，
HTML
HTML
<label for="fName">First Name<sup>*</sup></label>
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/>
JavaScript
JavaScript
var fName = document.getElementById("fName");
fName.label.style.color="red";
Is this a valid way to change the color or the label or does it need it's own id?
这是更改颜色或标签的有效方法还是需要它自己的 ID？
Thanks for the help! Clarification, the color needs to change if the field is empty on the form submit.
谢谢您的帮助！澄清一下，如果表单提交上的字段为空，则颜色需要更改。
回答by Sanoob
Your code is valid for changing attribute color. But I don't think your code will change colour of your label. If this style unique for that element you can use a idfor labeland make same kind script to change color for label too. I think it would be great if you define a classin cssand add this class name using JavaScript,Code for that follows.
您的代码对于更改属性有效color。但我认为您的代码不会改变标签的颜色。如果该样式对于该元素是唯一的，您也可以使用idforlabel并制作相同类型的脚本来更改标签的颜色。我认为如果你定义一个classincss并使用 JavaScript 添加这个类名会很棒，代码如下。
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
If your can use jQueryframework. It will save lots of time.
如果您可以使用jQuery框架。它会节省很多时间。
回答by SpidrJeru
Check out this very complete answer: Javascript change color of text and background to input value
查看这个非常完整的答案： Javascript将文本和背景的颜色更改为输入值
回答by King King
I believe that there is not any short and direct way to access the attached label corresponding to an input field using javascript. You can access the attached label via CSS (with some tweaks in layout) but in javascript, you have to set up a few lines of code. To use this code, the layout also has a requirement that all the attached label should go before the input field (spaces in between are allowed). This code just use the previousSiblingproperty of a DOM element with some other DOM stuffs. Here is the detail:
我相信没有任何简短直接的方法可以使用 javascript 访问与输入字段相对应的附加标签。您可以通过 CSS 访问附加标签（对布局进行一些调整），但在 javascript 中，您必须设置几行代码。要使用此代码，布局还要求所有附加标签都应放在输入字段之前（允许中间有空格）。这段代码只是将previousSiblingDOM 元素的属性与其他一些 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;
}
Use the getLabelFromInputIDfunction to access the attached label from the corresponding input field's ID. Note that the label should have forattribute set-up correctly (this is the standard and common practice).
使用该getLabelFromInputID函数从相应的输入字段的 ID 访问附加的标签。请注意，标签应for正确设置属性（这是标准和常见做法）。
Here is the Fiddle Demo. In this demo, you just try clicking on the page to see it in action.
这是小提琴演示。在此演示中，您只需尝试单击页面即可查看它的运行情况。
回答by Tirthrajsinh Parmar
using css
使用 CSS
form label{color:red};
using javascript
使用 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>
or simple javascript
或简单的javascript
document.getElementsByClassName("lbl").style.color="red";
回答by fny
This all depends on your use case. If you are simply trying to style the element red statically, you should define a css class (e.g. `red-label { color: red; }) and apply that class to the label.
这一切都取决于您的用例。如果您只是想静态地将元素设置为红色，您应该定义一个 css 类（例如 `red-label { color: red; }）并将该类应用于标签。
If you are trying to dynamically set the color to red (e.g. upon a form validation error), you'll need to target the label using a query selector of some sort.
如果您尝试将颜色动态设置为红色（例如，在表单验证错误时），您将需要使用某种查询选择器来定位标签。
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' ;
}
The examples above use document.getElementByIdto target the element. You could also opt to use document.querySelectoror a library like jQuery to target the labels.
上面的示例document.getElementById用于定位元素。您还可以选择使用document.querySelectorjQuery 或类似 jQuery 的库来定位标签。
Working example: http://jsbin.com/calol/1
工作示例：http: //jsbin.com/calol/1
回答by Jukka K. Korpela
An inputelement does not have a labelproperty or another way to directly refer to its label. You need to assign an idto the labelelement or otherwise find a way to access it. You could traverse all labelelements on a page and use the one with a forproperty matching the inputelement, but it's probably easier to just use idfor it.
一个input元素没有label财产或另一种方式来直接引用它的标签。您需要将分配id给label元素或以其他方式找到一种方法来访问它。您可以遍历label页面上的所有元素并使用具有for与该input元素匹配的属性的元素，但仅使用id它可能更容易。
