ajax関連の質問です。

下記のようなソースがあって、prototypeを利用して、どこかをクリックする度にid="index"内に流し込む内容で表示が変わるようなサイトを考えています。

-省略-
<body id="index">
-省略-
</body>
</html>

しかし、innerHTMLで流し込む内容にはid名等をつけていますが、外部ファイル化してあるCSSやjavascriptが機能しません。

innerHTMLに入れ込む内容
<div id="aiueo">
中身あり
</div>

外部cssの内容
#aiueo {
background: url("img/img.jpg");
width: 100px;
height: 50px;
}
※innerHTMLに入れ込む内容に直接記述する場合は上記cssは指定されます。

外部javascriptの内容
window.onload = function(){
$('aiueo').style.color = "#ff0000";
}
※上記のjavascriptに関しては、onloadの段階で#aiueoが存在していないのでエラーになるのは理解しています。

あくまで、javascript、cssは外部ファイルのままで、どのようにすれば上記のようなことができるのか、またはそもそもできないことなのか、どなたかご教授願います。

回答の条件
  • URL必須
  • 1人1回まで
  • 登録:2009/08/22 02:41:36
  • 終了:2009/08/23 13:30:57

ベストアンサー

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/08/22 09:08:14

ポイント100pt

JavaScript から外部 CSS を読み込むには、下記のようなコードを追加してください。

var fcss = document.createElement('link');
fcss.rel = 'stylesheet';
fcss.href = 'hogehoge.css';    //外部CSSファイル名
fcss.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(fcss);  //head内にロード

参考サイト

id:AKI-NAMI

質問内容が悪かったのかもしれませんが、

このやり方では、「innnerHTMLに流し込んだ要素」には適用されません。

2009/08/22 16:07:10

その他の回答(1件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/08/22 09:08:14ここでベストアンサー

ポイント100pt

JavaScript から外部 CSS を読み込むには、下記のようなコードを追加してください。

var fcss = document.createElement('link');
fcss.rel = 'stylesheet';
fcss.href = 'hogehoge.css';    //外部CSSファイル名
fcss.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(fcss);  //head内にロード

参考サイト

id:AKI-NAMI

質問内容が悪かったのかもしれませんが、

このやり方では、「innnerHTMLに流し込んだ要素」には適用されません。

2009/08/22 16:07:10
id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812009/08/23 10:36:04

ポイント100pt

普通に pahoo さんのやり方で適用されると思いますが……


test.css

#aiueo {
  background: url("img/img.jpg") ;
  width: 100px ;
  height: 50px ;
}

test.js

function insertHTML() {
  document.getElementById('index').innerHTML += '<div id="aiueo">中身あり</div>' ;
}

onload = function() {
  var l = document.createElement('link') ;
  l.rel = 'stylesheet' ;
  l.type = 'text/css' ;
  l.href = './test.css' ;
  document.getElementsByTagName('head')[0].appendChild(l) ;
}

呼び出し元 html

<html>
  <head>
    <script type="text/javascript" src="./test.js"></script>
  </head>

  <body onclick="insertHTML()" id="index">
    てすと
  </body>
</html>

ただ、Safari や Google Chrome などの Webkit 系? のブラウザは Append した要素にはキャッシュが優先されるようで、

呼び出しを工夫しないと css ファイルの内容を変更しても更新されませんでした。

普通に link 要素を html に書き込んだ場合はちゃんと反映されるのですが。


http://q.hatena.ne.jp

id:AKI-NAMI

ありゃりゃ・・・・・・

今度は動きました。キャッシュのせいでしょうか・・・・・・

IE8、firefox3.5、Safari4、Google chrome2.0、Opera9.64

最初は全てでだめだったのですが、今動いています。

ありがとうございました。

2009/08/23 13:30:04
  • id:AKI-NAMI
    どちらの方も同内容でしたので、最初の方をイルカ賞とさせて頂きました。
    最初の方の回答には参考リンクもあります。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません