人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: AKI-NAMI
●カテゴリ:ウェブ制作
✍キーワード:.jpg Ajax background COLOR CSS
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pahoo
●100ポイント ベストアンサー

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に流し込んだ要素」には適用されません。


2 ● GoldenDawn
●100ポイント

普通に 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

◎質問者からの返答

ありゃりゃ・・・・・・

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ