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 でタグが有効になっていることを確認することでした。

コードがlabelタグを無効にすることは決してないので、これはここでは要因ではありません。

この1つのラベルタグだけではありません-ページ上のすべてのラベルタグが黒くなりませんが、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」を true にしました

  • ラベルとその親divに固定ピクセル幅を追加しました

これらの 2 つの試みは、私が読んだ内容に基づいています。

それらは役に立ちませんでした。その上、私はすでにlabelの親div用に 'display:inline-block' を持っていました 。これは、(おそらく) 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、 zoom:1などが機能すると思いましたが、私にとってはそのような運はありません）。

ここにソリューションを書いた時点では、テキストの色を変更したときに IE にラベルタグを強制的に再描画させるよりエレガントな方法を (まだ) 誰も教えてくれませんでした。テキストの色が変更されたときにIE に強制的にラベルタグを再描画させる方法。

1 つ追加します: 私の 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 は、.NET を使用する JScript と呼ばれる独自のフレーバーを使用しますattachEvent。

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