及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > JavaScript > Mozilla Firefox で innerText が効かない

Mozilla Firefox で innerText が効かない

FirefoxではJavaScript で innerTextが機能しない場合が有る模様。
解決策をGoogleで調べてみたら、検索結果件数がたくさんあった。困っている人が結構多そう。
解決策：　textContent を併記したら、Firefox （ver.11.0 で確認）でも機能した。

JavaScript サンプル

HTML内の文字を入れ替える JavaScript のサンプル。
innerText と textContent を併用した例。
サンプル4行目の「cCode.textContent = str;」が無いと、IE9では機能したが、Firefox(v11.0)では機能しなかった。
?
1
2
3
4
5
function changetxt(txtID,str){
var cCode = document.getElementById(txtID);
cCode.innerText = str;
cCode.textContent = str;    //Firefox 対策。
}

HTMLソースコード サンプル

a タグの onclickの「changetxt('ccodetxt','#00CCFF');」で changetxt関数を動かす。
changetxt関数で、id="txt" のレイヤータグ内の文字を入れ替える。
changetxt関数に、textContentを併記してある。

HTML
?
1
2
3
4
5
6
7
<div id="bg" style="padding:20px;">
  <div id="txt">[ ここに色見本とカラーコード名が表示されます。 ]</div>
</div>
  
<a onclick="document.getElementById('bg').style.backgroundColor='#00CC00';changetxt('txt','#00CC00');" href="#">#00CC00</a>
<a onclick="document.getElementById('bg').style.backgroundColor='#FF0000';changetxt('txt','#FF0000');" href="#">#FF0000</a>
<a onclick="document.getElementById('bg').style.backgroundColor='#00CCFF';changetxt('txt','#00CCFF');" href="#">#00CCFF</a>
Javascript
?
1
2
3
4
5
function changetxt(txtID,str){
var cCode = document.getElementById(txtID);
cCode.innerText = str;
cCode.textContent = str;    //Firefox対策。
}

サンプルHTML

実際のサンプルを見る
MENU Ξ