使用 javascript 更改 <label> 元素的 style.color 失败答案

【问题标题】：using javascript to change style.color of a <label> element FAILS使用 javascript 更改 <label> 元素的 style.color 失败
【发布时间】：2012-04-22 03:24:26
【问题描述】：

以下代码在 FF 中有效，但在 IE9 中无效：

     // turn on the 'image file upload' field and its label
    document.getElementById('itemImageId').disabled = false;
    document.getElementById('labelForImageUploadID').style.color = "black";

这是带有标签和文件输入的 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>

** 编辑 ** 上面的标签和文件上传标签嵌套在下面的 div 中——我添加了这个，这样你就可以看到鼠标点击是如何处理的。 handleRowClick() 函数有上面试图将文本变黑的 Javascript 代码：

      <div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);"
         onmouseover="handleMouseOver(this);" onmouseout="handleMouseOut(this);"
         ondblclick="handleDblClick(this);">

所以当这个标签第一次出现在页面上时，它的颜色是正确的——由于内联颜色样式，它是银色的。

然后上面的 Javascript 代码在鼠标点击时执行。

在 Firefox 中，Javascript 代码将标签文本变为黑色，并启用文件上传控制。

但是在 IE9 中标签的文本保持灰色。

IE9不支持style.color = "somecolor"动态控制label标签的颜色吗？

我查看了其他一些帖子，我发现的唯一怪癖是，如果您启用/禁用动态发生，以确保标签在 IE9 中已启用，然后再尝试更改其颜色。

这不是一个因素，因为代码永远不会禁用 label 标记。

也不只是这个label标签——页面上所有的label标签都没有变黑但仅在 IE9 中 - 在 FF 中一切正常。

我是否缺少“陷阱”或技巧？

【问题讨论】：

你是怎么绑定点击事件的？
抱歉耽误了时间——我在上面的代码中添加了鼠标点击处理程序。
似乎工作正常：jsfiddle.net/pP3dd。页面中可能还有其他内容。

标签： javascript html css

【解决方案1】：

我解决了这个问题。

最初的问题是——当我将它们的文本颜色从银色更改为黑色时，我的 label 标签在 IE 中不会重绘/刷新——下面的代码失败但仅在 Internet Explorer 中失败——下面的代码在 Firefox 等中运行良好：

   // turn on the 'image file upload' label
document.getElementById('labelForImageUploadID').style.color = "black";

症状和线索

我知道上面的代码实际上是在 IE 中将 label 的文本更改为黑色吗？是的。但是在执行上述代码后，要查看页面上 label 标记上的文本颜色变化，我必须：

调整 IE 浏览器窗口的大小 -- 并且 BAM 将 label 文本更改为黑色
或者双击IE浏览器窗口的空白区域——效果一样，标签文字就会显示上面代码的效果，文字会变黑。

所以我知道将颜色更改为黑色在代码中起作用，并且我了解到问题“一定是 IE9 浏览器窗口在颜色更改后没有刷新 label 标签”。

以下是我尝试过的一些没有效果的方法：

通过将 zoom:1 添加到 label 的样式及其父 div
为 label 及其父 div

这 2 次尝试基于我阅读的内容HERE

那些事情没有帮助。此外，我已经为 label 的父 div 设置了 'display:inline-block' 这也（据说）强制 'hasLayout' 解决 IE 问题。

解决方案在这里

    // 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"

多么笨拙的一段代码。

我确信可能有更优雅的方式（我认为 hasLayout， zoom:1 等会起作用，但对我来说没有这样的运气）。

当我在这里写我的解决方案时，没有人（还）用一种更优雅的方式来强制 IE 在我更改它们的文本颜色时重绘我的 label 标签 - 也许在之后在这里看到我的解决方法有人会提供一种更优雅的强制方式 IE 在文本颜色发生变化时重绘 label 标签。

我要补充的一件事：也许是我的 DOCTYPE 导致了这个问题——如果你认为是的话，请加入。这是我在页面上使用的 DOCTYPE：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【讨论】：

【解决方案2】：

代码运行良好：

http://jsfiddle.net/AlienWebguy/HKhjs/

我的假设是您仅依赖于 addEventlistener()，它只是 JavaScript。 IE 使用它自己的风格，称为 JScript，它使用 attachEvent。

object.attachEvent(event, callback)

【讨论】：

我在上面的代码中添加了“onclick()”处理程序——至少据我所知，我不使用 addEventListener()。我讨厌 IE。
确保我的 style.color = "black" 代码行在鼠标点击时被访问 -- 我在之后那行代码。现在，在关闭 alert() 框后，当焦点切换回 IE 窗口时，黑色文本突然打开。我删除了 alert() 调用——尽管我现在知道代码行正在执行，但文本再次不会变为黑色。所以我调整了 IE 窗口的大小。然后文字变黑了！！！ IE 在不手动调整窗口大小的情况下不会刷新窗口，或者调用 alert() 将焦点切换一秒钟然后返回。
好吧，我确定我发现了一个 IE9 错误。在我的 style.color = "black" 行代码执行后——文本仍然是灰色的——如果我只是双击 IE9 浏览器窗口的任何白色区域——黑色文本打开。有人听说过 IE9 的“不刷新浏览器”错误吗？