AKI-NAMI回答ポイント 200pt

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は外部ファイルのままで、どのようにすれば上記のようなことができるのか、またはそもそもできないことなのか、どなたかご教授願います。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

pahoo2009/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内にロード
```
参考サイト
- Javascriptで動的にCSSファイルを追加する
スター
- AKI-NAMI 2009/08/22 16:07:10
  
  質問内容が悪かったのかもしれませんが、
  
  このやり方では、「innnerHTMLに流し込んだ要素」には適用されません。

その他の回答

GoldenDawn2009/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
スター
- AKI-NAMI 2009/08/23 13:30:04
  
  ありゃりゃ･･････
  
  今度は動きました。キャッシュのせいでしょうか･･････
  
  IE8、firefox3.5、Safari4、Google chrome2.0、Opera9.64
  
  最初は全てでだめだったのですが、今動いています。
  
  ありがとうございました。

この質問へのコメント

AKI-NAMI2009/08/26 12:13:09

どちらの方も同内容でしたので、最初の方をイルカ賞とさせて頂きました。
最初の方の回答には参考リンクもあります。

ajax関連の質問です。

ベストアンサー

pahoo2009/08/22 09:08:14
満足100pt

参考サイト

AKI-NAMI 2009/08/22 16:07:10

その他の回答

GoldenDawn2009/08/23 10:36:04
満足100pt

AKI-NAMI 2009/08/23 13:30:04

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

ajax関連の質問です。

ベストアンサー

pahoo2009/08/22 09:08:14 満足100pt

参考サイト

AKI-NAMI 2009/08/22 16:07:10

その他の回答

GoldenDawn2009/08/23 10:36:04 満足100pt

AKI-NAMI 2009/08/23 13:30:04

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

pahoo2009/08/22 09:08:14
満足100pt

GoldenDawn2009/08/23 10:36:04
満足100pt