- ベストアンサー
DOMで生成したタグにCSSが適用されない(IE)
DOMでタグを生成した場合、IEではそのタグにCSSが適用されないのですが 何かいい解決法はないでしょうか。ちなみに試したHTMLは下記の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript"><!-- A = document.createElement("div"); A.setAttribute("id", "A"); A.setAttribute("style", "color:red;"); document.body.appendChild(A); document.getElementById("A").appendChild(document.createTextNode("test")); --></script> </body> </html>
- AXRRXA
- お礼率78% (15/19)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEのバグです。(setAttributeの実装の手抜き) 詳しい原因・対処は http://nanto.asablo.jp/blog/2005/10/29/123294 こちらに詳しく載っています。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
とりあえず <style> #A{color:red;} </style> しておくか、もしくは A.setAttribute("style", "color:red;"); を A.style.color="red"; にしてみてください
お礼
別にスタイル指定しても解決するんですね。これは知りませんでした。 ありがとうございます。
関連するQ&A
- 以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト
以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクするjavascriptです。 はじめて作ったタグなので無駄なところを教えてください また、同じウィンドウで開くにはどこをいじったらよいですか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <script type="text/javascript"> function change(){ document.getElementById("pic").src="2.jpg"; window.open("http://www.goo.ne.jp/");} </script></head> <body> <a href="javascript:change();"><img id="pic" src="1.jpg" alt="gooへリンク"></a> </body></html>
- ベストアンサー
- JavaScript
- BODYタグのonloadについて
こんにちは。 HTMLのBodyタグにて、onload処理を記述しているのですが、 不思議な現象が起きます。。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript" type="text/JavaScript"> <!-- // 初期表示 function init() { alert("AAA"); var formObj = document.getElementById("starter"); alert("formObj.action = " + formObj.action); formObj.submit(); } //--> </script> </head> <body onload="init()" tabindex="-1"> Now Loading... <form method="post" name="starter" action="/getIchiran.do" > <% System.out.println("このJSPにきてますか？"); %> </form> </body> </html> 上記のように記述しているのですが、 onloadのinit関数が、呼ばれる場合と呼ばれない場合があります・・・ 呼ばれる場合と、呼ばれない場合でも 「このJSPにきてますか？」のログは表示されているので、このHTML（JSP）は呼ばれている模様です。 どうしてこうのような現象が起きるのかさっぱり分からなくて・・・ 何が悪いのか教えて頂けないでしょうか？ 宜しくお願い致します。 IEは6.0、 OSはWindowsXPです。
- ベストアンサー
- HTML
- createElementによるタグ追加作成
ボタンが押された時にPタグの中に、H1タグを挿入されるhtmlを作成しました。 ですが、ボタンを押しても addH関数に処理が流れないみたいなのです。 なぜなのでしょうか・・・。 環境は、Win7・IE9です。 よろしくお願いします。 ===以下ソース=== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タグの追加</title> <script type="text/javascript"> <!-- function addH(){ alert("test"); /*（1）Pタグの要素ノードオブジェクト*/ var info = document.getElementById('info'); alert(info): /*（2）新たにH1タグの要素ノードを作成する*/ var h1Node = document.createElement('h1'); /*（3）新たにテキストノードを作成する*/ var textNode = document.createTextNode('こんにちは'); /*（4）作成したテキストノードをH1タグ要素の子要素として追加する*/ h1Node.appendChild(textNode); /*（1）Pタグに、完成したH1タグを追加する*/ info.appendChild(h1Node); } --> </script> </head> <body> <p id="info"></p> <input type="button" value="H1タグ追加" onClick="addH()"> </body> </html> ===ソースここまで===
- ベストアンサー
- JavaScript
- このソースどういう意味ですか【JavaScript】
<HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="～"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか？ 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。
- ベストアンサー
- JavaScript
- IEでドキュメントモードの指定
IE 10.0.9200.16843を使用しています。 ドキュメントモードをIE8に固定したいので <meta http-equiv="X-UA-Compatible" content="IE=IE8"> と書いたのですが、反映されないようなのです。 検証に使ったコードは以下の通りです。 ================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Compatible" content="IE=IE8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>IEドキュメントモードテスト</title> </head> <body> <script type="text/javascript"> document.write("ドキュメントモード＝" + document.documentMode + "<BR>"); </script> </body> </html> ================================== 何か見落としがあるのだと思うのですが、教えて頂けませんでしょうか。 なお、metaタグでなくレスポンスヘッダでX-UA-Compatibleを指定しても同じでした。 IE=IE7やIE9を指定しても変わりませんでした。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- ModalBoxのIEでの表示について
質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう？ 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか？
- 締切済み
- JavaScript
- IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
- ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- 等のタグは入れた方が良いのでしょうか?
<link href="http://○○.css" rel="stylesheet"> の様に外部ファイルからCSSやjavascriptを読み込んでいるのですが <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> 等のタグは入れた方が良いのでしょうか? これらのタグの役割がわかりません。
- ベストアンサー
- HTML
お礼
問題が解決しました！ありがとうございました！