5

以下代码在 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" 动态控制标签标签的颜色吗？

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

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

不仅仅是这个标签标签——页面上的所有标签标签都无法变黑，但仅在 IE9 中——在 FF 中一切正常。

有没有我错过的“陷阱”或技巧？

4

2 回答 2

6

我解决了这个问题。

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

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

症状和线索

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

  • 调整 IE 浏览器窗口的大小——然后 BAM 将标签文本更改为黑色

  • 或者双击IE浏览器窗口的空白区域——同样的效果，标签文本会显示上述代码的效果，文本会变黑。

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

以下是我尝试过的一些没有效果的事情：

  • 通过将zoom:1添加到标签的样式及其父div使 'hasLayout' 为真

  • 为标签及其父div添加了固定像素宽度

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

那些东西没有帮助。此外，我已经为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 在我更改它们的文本颜色时重新绘制我的标签标签——也许在看到我的解决方法之后，有人会提供更优雅的当文本颜色发生变化时强制 IE 重绘标签标签的方法。

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

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2012-04-22T16:39:34.360 回答
3

代码工作正常：

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

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

object.attachEvent(event, callback)
于 2012-04-22T03:28:59.627 回答