下記のようなソースがあって、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は外部ファイルのままで、どのようにすれば上記のようなことができるのか、またはそもそもできないことなのか、どなたかご教授願います。
No.1
5960
633
100pt
JavaScript から外部 CSS を読み込むには、下記のようなコードを追加してください。
29
29
var fcss = document.createElement('link');
fcss.rel = 'stylesheet';
fcss.href = 'hogehoge.css'; //外部CSSファイル名
fcss.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(fcss); //head内にロード
No.1
5960633
ここでベストアンサー
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内にロード
質問内容が悪かったのかもしれませんが、
このやり方では、「innnerHTMLに流し込んだ要素」には適用されません。
No.2
42681
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 に書き込んだ場合はちゃんと反映されるのですが。
ありゃりゃ･･････
今度は動きました。キャッシュのせいでしょうか･･････
IE8、firefox3.5、Safari4、Google chrome2.0、Opera9.64
最初は全てでだめだったのですが、今動いています。
ありがとうございました。
AKI-NAMI
2009/08/26 12:13:09
1
1
1
2
1
質問内容が悪かったのかもしれませんが、
このやり方では、「innnerHTMLに流し込んだ要素」には適用されません。