使用JavaScript來改變<label>元素的style.color失敗

下面的代碼在FF但不是在IE9：使用JavaScript來改變<label>元素的style.color失敗

 // 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一切正常。

是否有'缺陷'或我失蹤的詭計？

來源

2012-04-22 wantTheBest

如何綁定click事件？ – AlienWebguy 2012-04-22 03:26:31

對不起，我花了一段時間 - 我在上面的代碼中添加了鼠標點擊處理程序。 – wantTheBest 2012-04-22 04:00:17

似乎正常工作：http://jsfiddle.net/pP3dd/。頁面中可能還有其他內容正在發生。 – 2012-04-22 07:08:49

的代碼工作正常：

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

我的假設是你依靠addEventlistener()只有這僅僅是JavaScript的。 IE使用它自己的叫做JScript的味道，它使用attachEvent。

object.attachEvent(event, callback)

來源

2012-04-22 03:28:59 AlienWebguy

我在上面的代碼中添加了'onclick（）'處理程序 - 我至少不知道我沒有使用addEventListener（）。我討厭IE。 – wantTheBest 2012-04-22 04:02:03

確保我的** style.color =「black」**代碼行在點擊鼠標時達到 - 我在*該行代碼後面加上alert（）*。現在突然關閉警報（）框後，黑色文字在焦點切換回IE窗口時打開。我刪除了alert（）調用 - 並且文本再次不會更改爲黑色，但我現在知道該代碼行正在執行。所以我調整了IE窗口。文字變黑了！如果不手動調整它的大小，IE會以某種方式刷新窗口，或者放入alert（）調用，然後再重新開啓焦點。 – wantTheBest 2012-04-22 06:28:52

好吧，很確定我發現了一個IE9的錯誤。在我的** style.color =「black」** **行代碼執行後 - 文本仍然是灰色的 - 如果我只是雙擊IE9瀏覽器窗口的任何白色區域 - 黑色文本打開。任何人都聽說IE9的「不清爽的瀏覽器」錯誤？ – wantTheBest 2012-04-22 06:43:32

我解決了這個問題。

原來的問題是 - 低於失敗，但只在Internet Explorer利用此代碼 - - 我標籤標籤不會重繪/刷新IE瀏覽器時，我改變了自己的文字顏色從銀色到黑色下面的代碼工作正常在Firefox等。：

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

症狀和線索

讓我知道了上面的代碼，事實上，改變標籤的IE瀏覽器中的文本爲黑色？是的。但要看到標籤執行上面的代碼後，我的網頁標籤上的文字顏色的變化，我不得不之一：

調整IE瀏覽器窗口 - 和BAM的標籤文字改爲黑色
或在IE瀏覽器窗口的空白區域的DoubleClick - 相同的效果，所述標籤文本，然後將顯示出上述碼的效果，該文本將變黑。

，所以我知道顏色的變化，以黑，代碼工作，我瞭解到，這個問題「必須是IE9瀏覽器窗口沒有刷新顏色改變後的標籤標籤。」

這裏有幾件事情我想，沒有任何效果：

加入變焦造「hasLayout的」真正：1到標籤的風格和它的父DIV
加入固定的像素寬度與標籤和到它的父DIV

這2次嘗試是基於什麼我讀HERE

那些東西沒有幫助。此外，我已經有'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"

什麼一個缺憾一段代碼。

我敢肯定，可能有一個更優雅的方式（我認爲hasLayout的， 變焦：1等的工作，但我沒有這樣的運氣）。

在我寫到這裏我的解決方案的時候，沒有人（但）遙相呼應用更優雅的方式來強制IE當我改變他們的文本顏色重繪我的標籤標籤 - 在這裏看到我的解決辦法後，也許有人會提供一個更優雅的方式來強制 IE重繪標籤標籤，當他們的文字顏色改變。

一件事我會補充一句：也許我的DOCTYPE導致了這個問題 - 如果你認爲它是如此的話。這是我在我的頁面上使用的DOCTYPE：

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

來源

2012-04-22 16:39:34 wantTheBest

使用JavaScript來改變<label>元素的style.color失敗

回答

相關問題