DOMでIEのstyleタグやscriptタグに書込む法

スポンサーリンク

Internet ExplorerのDOM操作で下のように、styleタグやscriptタグにtextNodeを
appendChildしようとするとエラーになります。そういう時の対処法です。

var css=document.createElement('style');
css.setAttribute('type','text/css');


var str=document.createTextNode('div.entryInfo{clear:both}');
css.appendChild(str);

var head=document.getElementsByTagName('head');
head[0].appendChild(css);

IE（インターネットエクスプローラ）で、styleタグに書き込むには、次のようにやるようです。

var css=document.createElement('style');
css.setAttribute('type','text/css');

css.styleSheet.cssText='div.entryInfo{clear:both}'

var head=document.getElementsByTagName('head');
head[0].appendChild(css);

IE、その他のブラウザ両対応のコードはこうなります。

var css=document.createElement('style');
css.setAttribute('type','text/css');

var str='div.entryInfo{clear:both}';

if(css.styleSheet){ //IE
	css.styleSheet.cssText=str;
}else{ //その他のブラウザ
	var text=document.createTextNode(str);
	css.appendChild(text);
}

var head=document.getElementsByTagName('head');
head[0].appendChild(css);

scriptタグの場合はこうやります。

var stag=document.createElement('script');
stag.setAttribute('type','text/javascript');

stag.text='alert("hoge");';

var head=document.getElementsByTagName('head');
head[0].appendChild(stag);

参考記事： Dynamic SCRIPT and STYLE elements in IE / Stoyan’s phpied.com

（英文サイト）

関連コンテンツ

スポンサーリンク

「DOMでIEのstyleタグやscriptタグに書込む法」への38件のフィードバック

  1. ＞初心者無視して、JavaScriptで参考になったことを書くシリーズ
    は、私はフォロー担当から外れるんで、おーとえすさんに来てもらって
    いいですか？笑

    返信

  5. うん。今それをこのブログ用に書いてる。
    IEでは動くけどfirefoxで動かなくて、原因箇所を特定したところ。

    ＩＥでしか見られないけど、今貼る。

    返信

  11. じゃあ、Tomから見ると、ぐるぐるなんだ。
    感想は？

    でもおーとえすさんと、SGLさんとこだと
    ぐるぐるしてるじゃない？

    返信

  14. 了解。

    いい忘れた。
    JQueryを使ってないから、おーとえすのソース見て、
    全部独自に書き直した。

    それで、ブラウザによって、うまくいかない。

    返信

  17. ふーん。そうなんだー。
    使ったことないから、わかんないや。

    で、どう？ぐるぐるがいっぱいなのは？

    返信

  22. 今、ちょうどいじってたとこ。
    でもまだ直す。

    途中でURLがないコメントがあると、そこで止まる。
    あとレイアウト。

    それから、回らないようにする。

    返信

  25. あっFFでも見えた。回ってる！
    ほんとだ。URLの無いコメで止まる笑。
    じゃあ、見届けようかな。

    返信

  27. いや、見届けない。ゆっくりやって。
    控えめな大きさにしてね。私のとこにおくんなら
    絵文字1.5倍角位のサイズがいいな。

    返信

  29. おおっIEでもFFでもCromeでもSafariでも、
    ちゃんと見えてるっ！
    ぐるぐるもしてないし。

    これ、うちでもつけるかな。

    返信

  32. ＞おおっIEでもFFでもCromeでもSafariでも、
    ＞ちゃんと見えてるっ！

    リポートありがとう。

    ＞ぐるぐるもしてないし。

    Tomさんの場合だけ、静止画に差し替え。
    他のユーザーがアニメを使っていたら、動く。

    ＞これ、うちでもつけるかな。

    おーとえすのアルゴリズムだけもらって、実装しなおした。
    おーとえすさんにもらってください。

    返信

  33. 朝の７時４０分なのに、アクセスが289ある。
    google anaiytics見たら、１０ページ以上見てる人が大勢いる。

    返信

  34. なんで朝なのに起きてるの？

    ＞アクセスが289ある。
    なんで？うちは70。ずるい。
    あー、あげはのほっぺにチューしたからか？

    ＞おーとえすさんにもらってください。
    えー、貼るだけにして譲ってよ。
    他の人は動いててもいいけど、Tomがぐるぐるしてないのがいい。

    何人いると思ってんの、うちのTom？

    これから出かけます～。

    返信

  35. ＞URL未記入は、名前の有無にかかわらず no image
    知ってる。
    なんでURL入らなかった？って思ったら
    ファンブログにログインしてないIEから書いてた笑。

    返信

  37. こんばんわ。

    さっそくマネさせていただきました！
    画像が付くだけでなんだか楽しいですね。

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。