HTMLとJavaScriptに関するtips
HTMLとJavaScriptを使っていてときたま「これはどうすれば良かったんだっけ」と思うような事がある。
JavaScriptの再復習も兼ねて、そんな、疑問点についてまとめてみる。
（Ajaxのライブラリを使えば簡単で間違いもなく実現できるのだが）
innerHTMLとinnerText
innerHTMLはIEでもFireFoxでも使える。
innerTextはFireFoxではサポートされていない。
替わりにtextContentを使う。
ソース１
JavaScriptでonclickイベントを動的に定義する。
HTMLタグを使わずにonclickイベントを動的に定義するには以下のコードを使う。
ソース２
簡易的にIEとFireFoxの判定をおこなうには
まくまでも簡易的な方法です。
ソース３
divタグでオーバレイパネルをつくる
別にdivタグでなくてもかまわないが、cssのpositionプロパティやz-indexプロパティを使うと、 Ajaxのライブラリを使わなくてもオーバレイの機能を実現でき、いろいろと応用できそう。
ソース４
赤色のpanel1をクリックすると緑色のpanel2より上位のレイヤーになります。
同様に、緑色のpanel2をクリックすると赤色のpanel1より上位のレイヤーになります。
CSSとJavaScriptの動的注入
外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。
以下の例は、ボタンが押されたときに、cssファイルとJavaScriptファイルを読み込む例です。
ソース５（１）-htmlソース
CSSとJavaScriptの動的注入 CSSとJavaScriptの動的注入
外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。
以下の例は、ボタンが押されたときに、cssファイルやJavaScriptファイルを読み込む例です。
ソース５（２）-注入されるCSSファイル(inject_CSS_JS.css)
ソース５（３）-注入されるJavaScriptファイル(inject_CSS_JS.js)
DOMの操作については「html要素へのアクセス（１）-DOMによるアクセス」を参照。
JavaScriptによるスタイルシートの操作についてもっと詳しい説明が必要なら、「 JavaScriptによるスタイルシート(CSS)の操作」が参考になる。
JavaScript ローダーについて、もっと、つっこんでみたいなら、「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議 | ゆっくりと…を。