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

wan*_*est 4 html javascript css

以下代码适用于 FF,但不适用于 IE9:

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

这是带有标签和文件输入的 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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

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

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

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

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

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

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

是否有我遗漏的“陷阱”或技巧?

wan*_*est 5

我解决了这个问题。

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

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

症状和线索

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

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

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

所以我知道代码中的颜色变为黑色是有效的,我了解到问题“一定是 IE9 浏览器窗口没有刷新 在颜色改变后标签标签”。

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

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

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

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

这些事情没有帮助。此外,我已经为label的父级设置了 'display:inline-block'div 设置 这也(据说)为 IE 问题强制使用了 'hasLayout'。

这是解决方案

    // 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"
Run Code Online (Sandbox Code Playgroud)

多么混乱的一段代码。

我确定可能有更优雅的方式(我认为hasLayoutzoom:1等会起作用,但对我来说没有这样的运气)。

当我在这里写我的解决方案时,没有人(还)用一种更优雅的方式来强制 IE在我更改它们的文本颜色时重新绘制我的标签标签——也许在看到我的解决方法后,有人会提供更优雅的强制IE重绘标签的方法在文本颜色更改时标签的方法。

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

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Run Code Online (Sandbox Code Playgroud)


Ali*_*guy 3

该代码工作正常:

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

我的假设是你addEventlistener()只依赖 JavaScript。IE 使用它自己的风格,称为 JScript,它使用attachEvent.

object.attachEvent(event, callback)
Run Code Online (Sandbox Code Playgroud)