使用 javascript 更改 <label> 元素的 style.color 失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10264961/
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
using javascript to change style.color of a <label> element FAILS
提问by wantTheBest
The following code works in FF but not in IE9:
以下代码适用于 FF，但不适用于 IE9：
// turn on the 'image file upload' field and its label
document.getElementById('itemImageId').disabled = false;
document.getElementById('labelForImageUploadID').style.color = "black";
Here is the HTML with the label and the file input:
这是带有标签和文件输入的 HTML：
<label for="itemImageId" style="color: silver" id="labelForImageUploadID">Item image
(select to change the item's current image)</label>
<input type="file" size="100px" id="itemImageId" disabled="disabled"
name="theFileUpload"></input>
** EDIT ** The above label and file upload tags are nested inside the following div-- I added this so you can see how the mouse click is handled. The handleRowClick()function has the above Javascript code that tries to turn the text black:
** 编辑 ** 上面的标签和文件上传标签嵌套在下面的div 中——我添加了这个，这样你就可以看到鼠标点击是如何处理的。该handleRowClick（）函数具有以上的JavaScript代码，试图打开文本黑色：
<div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);"
onmouseover="handleMouseOver(this);" onmouseout="handleMouseOut(this);"
ondblclick="handleDblClick(this);">
So when this label first appears on the page, its color is correct -- it is silver due to the inline color style.
所以当这个标签第一次出现在页面上时，它的颜色是正确的——由于内联颜色样式，它是银色的。
Then the Javascript code above executes on a mouse click.
然后上面的 Javascript 代码在鼠标点击时执行。
In Firefox, the Javascript code turns the label text to black, and enables the file upload control.
在Firefox中，Javascript代码将标签文本变成黑色，并启用文件上传控制。
However in IE9 the label's text stays gray.
但是在 IE9 中，标签的文本保持灰色。
Does IE9 not support style.color = "somecolor"to dynamically control colors of the labeltag?
IE9 不支持style.color = "somecolor"动态控制标签标签的颜色？
I've looked at a few other posts, and the only quirk I found was that if you have enabling/disabling happening dynamically, to make sure the tag is ENABLED in IE9 before you try to change its color.
我查看了其他一些帖子，我发现的唯一怪癖是，如果您动态启用/禁用，在尝试更改其颜色之前，请确保标签在 IE9 中已启用。
That's not a factor here as the code never disables the labeltag.
这不是这里的一个因素，因为代码永远不会禁用标签标签。
It's not just this one labeltag either -- all the labeltags on the page fail to turn black but ONLY in IE9 -- in FF everything works.
这不仅仅是一个标签标签——页面上的所有标签标签都无法变黑，但仅在 IE9 中——在 FF 中一切正常。
Is there a 'gotcha' or a trick I'm missing?
是否有我遗漏的“陷阱”或技巧？
回答by wantTheBest
I fixed this.
我解决了这个问题。
The original problem was -- my labeltags would not redraw/refresh in IE when I changed their text color from silver to black -- this code below failed but ONLY in Internet Explorer -- the code below worked FINE in Firefox etc.:
最初的问题是——当我将它们的文本颜色从银色更改为黑色时，我的标签标签不会在 IE 中重绘/刷新——下面的代码失败，但仅在 Internet Explorer 中——下面的代码在 Firefox 等中运行良好：
// turn on the 'image file upload' label
document.getElementById('labelForImageUploadID').style.color = "black";
SYMPTOMS AND CLUES
症状和线索
Did I know that the above code was, in fact, changing the text of the labelto black in IE? Yes. But to see the text color change on the labeltags on my page after the above code executed, I had to either:
我知道上面的代码实际上是在 IE中将标签文本更改为黑色吗？是的。但是要在执行上述代码后查看我页面上标签标签上的文本颜色变化，我必须：
resize the IE browser window -- and BAM the labeltext changed to black
or doubleclick in an empty area of the IE browser window -- same effect, the labeltext would then show the effects of the above code, the text would turn black.
调整 IE 浏览器窗口的大小 - 并将标签文本更改为黑色
或者双击IE浏览器窗口的空白区域——同样的效果，标签文字会显示上述代码的效果，文字会变黑。
So I knew the color change to black was working in the code, and I learned that the problem "must be that the IE9 browser window is not refreshing the labeltag after the color change."
所以我知道代码中的颜色变为黑色是有效的，我了解到问题“一定是IE9浏览器窗口在颜色改变后没有刷新标签标签”。
Here are a couple things I tried that had no effect:
以下是我尝试过的一些没有效果的事情：
made 'hasLayout' true by adding zoom:1to the style of the labeland to its parent div
added a fixed pixel width to the labeland to its parent div
通过将zoom:1添加到标签样式及其父div使 'hasLayout' 为真
向标签及其父div添加了固定像素宽度
These 2 attempts were based on what I read HERE
这 2 次尝试基于我在此处阅读的内容
Those things did not help. Besides, I already had 'display:inline-block' for the label's parent divwhich also (supposedly) forces 'hasLayout' for IE issues.
这些事情没有帮助。此外，我已经为标签的父div 设置了 'display:inline-block'， 这也（据说）为 IE 问题强制使用了 'hasLayout'。
HERE IS THE SOLUTION
这是解决方案
// THIS DID NOT WORK IN IE BUT WAS FINE IN Firefox:
// document.getElementById('labelForImageUploadID').style.color = "black";
// THIS WORKS IN IE and IN FIREFOX
var imageUploadLabel = document.getElementById('labelForImageUploadID');
imageUploadLabel.style.color = "black";
imageUploadLabel.style.display = "none";
imageUploadLabel.style.display = "inline-block"
What a kludgy piece of code.
多么混乱的一段代码。
I'm sure there's probably a more elegant way (I thought hasLayout, zoom:1, etc. would work but for me no such luck).
我确定可能有更优雅的方式（我认为hasLayout、 zoom:1等会起作用，但对我来说没有这样的运气）。
At the time I wrote my solution here, no one had (yet) chimed in with a more elegant way to force IE to redraw my labeltags when I change their text color -- maybe after seeing my workaround here someone will provide a more elegant way to force IE to redraw labeltags when their text color changes.
当我在这里写我的解决方案时，没有人（还）用一种更优雅的方式来强制 IE在我更改它们的文本颜色时重新绘制我的标签标签——也许在看到我的解决方法后，有人会提供更优雅的强制 IE在文本颜色更改时重新绘制标签标签的方法。
ONE THING I will add: maybe my DOCTYPE is causing this problem -- chime in if you think it is. This is the DOCTYPE I use on my pages:
我要补充的一件事：也许是我的 DOCTYPE 导致了这个问题——如果你认为是的话，请加入。这是我在页面上使用的 DOCTYPE：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
回答by AlienWebguy
The code works fine:
代码工作正常：
http://jsfiddle.net/AlienWebguy/HKhjs/
http://jsfiddle.net/AlienWebguy/HKhjs/
My assumption is you're relying on addEventlistener()only which is merely JavaScript. IE uses it's own flavor called JScript which uses attachEvent.
我的假设是您addEventlistener()只依赖于JavaScript。IE 使用它自己的风格，称为 JScript，它使用attachEvent.
object.attachEvent(event, callback)
