文章/答案/技术大牛

发布

社区首页 >问答首页 >使用javascript更改<label>元素的<label>失败

问使用javascript更改<label>元素的<label>失败
EN

Stack Overflow用户

提问于 2012-04-22 03:24:26

回答 2查看 53.4K关注 0票数 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中，一切都正常。

我错过了什么“抓到”或者一个小把戏吗？

javascript

html

css

回答 2

Stack Overflow用户

发布于 2012-04-22 16:39:34

我修好了这个。

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

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

症状与线索

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

调整IE浏览器窗口的大小-并将标签文本更改为黑色
或者在IE浏览器窗口的空白区域中双击--同样的效果，标签文本将显示上述代码的效果，文本将变为黑色。

因此，我知道在代码中将颜色更改为黑色，并且我了解到问题“必须是IE9浏览器窗口在颜色更改后不会刷新标签标签”。

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

通过将hasLayout:1添加到标签的样式及其父的div中，使‘’变为真
向标签及其父div添加固定像素宽度。

这两次尝试是基于我所读到的这里

那些东西没什么用。此外，我已经为标签的母公司div提供了“display:inline”，这也(据称)迫使'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，缩放:1等会有用，但对我来说没有这样的运气)。

当我在这里编写解决方案时，还没有人(还)加入了一种更优雅的方法，迫使IE在更改文本颜色时重新绘制我的标签标签--也许在看到我的解决方案之后，有人会提供一种更优雅的方法，迫使IE在文本颜色变化时重新绘制标签标签。

我要补充一件事:也许是我的DOCTYPE造成了这个问题--如果你认为是的话，就插嘴吧。这是我在页面上使用的DOCTYPE：

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

票数 6

Stack Overflow用户

发布于 2012-04-22 03:28:59

代码运行良好：

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

我的假设是，您只依赖于addEventlistener()，这仅仅是JavaScript。IE使用它自己的口味，叫做JScript，它使用attachEvent。

object.attachEvent(event, callback)

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10264961

复制

相似问题

问使用javascript更改<label>元素的<label>失败
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript更改<label>元素的<label>失败EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript更改<label>元素的<label>失败
EN