使用javascript更改元素的style.color失败_Javascript_Html_Css

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

javascript html css

使用javascript更改元素的style.color失败,javascript,html,css,Javascript,Html,Css,以下代码适用于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

以下代码适用于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中一切正常

是否有我遗漏的“抓住你了”或技巧？

代码运行良好：

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

我把这个修好了

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

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

症状和线索

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

调整IE浏览器窗口的大小-然后BAM标签文本变为黑色

或者双击IE浏览器窗口的空白区域-效果相同，标签文本将显示上述代码的效果，文本将变为黑色

因此，我知道在代码中颜色更改为黑色是可行的，并且我了解到问题一定是IE9浏览器窗口在颜色更改后没有刷新标签标签

以下是我尝试过的几件没有效果的事情：

通过将缩放：1添加到标签样式及其父div，使“hasLayout”成为真

将固定像素宽度添加到标签及其父div

这两次尝试都是基于我读到的内容

这些事情没有帮助。此外，我已经为标签的父div设置了“display:inline block” 这也可能会迫使IE问题采用“hasLayout”

这是解决办法

多么糟糕的一段代码

我想可能有一种更优雅的方式， zoom:1等等，如果不是我的运气的话，我会成功的

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

我要补充一点：可能是我的DOCTYPE导致了这个问题——如果你认为是，请插话。这是我在页面上使用的DOCTYPE：

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

如何绑定单击事件？很抱歉花了一段时间-我在上面的代码中添加了鼠标单击处理程序。似乎工作正常：。页面中可能还有其他内容。我在上面的代码中添加了“onclick”处理程序-至少据我所知，我没有使用addEventListener。我讨厌IE。为了确保我的style.color=鼠标点击就可以到达黑色代码行，我在那行代码后面放了一个警告。现在，在解除警报框后，当焦点切换回IE窗口时，黑色文本突然打开。我删除了警报调用，文本也不会变为黑色，尽管我现在知道代码行正在执行。所以我调整了IE窗口的大小。文本变成黑色！！！IE在不手动调整窗口大小的情况下不会刷新窗口，也不会发出一个警报呼叫，将焦点切换一秒钟然后返回。好吧，我很确定我发现了一个IE9错误。在我的style.color=黑色代码行执行后-文本仍然是灰色-如果我只需双击IE9浏览器窗口的任何白色区域-黑色文本将打开。有人听说过IE9的“不刷新浏览器”错误吗？

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

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