HTMLとJavaScriptに関するtips


HTMLとJavaScriptを使っていてときたま「これはどうすれば良かったんだっけ」と思うような事がある。
JavaScriptの再復習も兼ねて、そんな、疑問点についてまとめてみる。

(Ajaxのライブラリを使えば簡単で間違いもなく実現できるのだが)

innerHTMLとinnerText

innerHTMLはIEでもFireFoxでも使える。

innerTextはFireFoxではサポートされていない。
替わりにtextContentを使う。

ソース1

JavaScriptでonclickイベントを動的に定義する。

HTMLタグを使わずにonclickイベントを動的に定義するには以下のコードを使う。

ソース2

簡易的にIEとFireFoxの判定をおこなうには

まくまでも簡易的な方法です。

ソース3

divタグでオーバレイパネルをつくる

別にdivタグでなくてもかまわないが、cssのpositionプロパティやz-indexプロパティを使うと、 Ajaxのライブラリを使わなくてもオーバレイの機能を実現でき、いろいろと応用できそう。

ソース4

赤色のpanel1をクリックすると緑色のpanel2より上位のレイヤーになります。

同様に、緑色のpanel2をクリックすると赤色のpanel1より上位のレイヤーになります。

CSSとJavaScriptの動的注入

外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。

以下の例は、ボタンが押されたときに、cssファイルとJavaScriptファイルを読み込む例です。

ソース5(1)-htmlソース





CSSとJavaScriptの動的注入


	

CSSとJavaScriptの動的注入

外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。

以下の例は、ボタンが押されたときに、cssファイルやJavaScriptファイルを読み込む例です。

ソース5(2)-注入されるCSSファイル(inject_CSS_JS.css)

ソース5(3)-注入されるJavaScriptファイル(inject_CSS_JS.js)

「CSSとJavaScriptの動的注入」のサンプルページ

 

DOMの操作については「html要素へのアクセス(1)-DOMによるアクセス」を参照。

JavaScriptによるスタイルシートの操作についてもっと詳しい説明が必要なら、「 JavaScriptによるスタイルシート(CSS)の操作」が参考になる。

JavaScript ローダーについて、もっと、つっこんでみたいなら、「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議 | ゆっくりと…を。

 

JavaScriptの参考書 /  Ajaxの参考書 /  HTMLの参考書 /  CSSの参考書

 

ページのトップへ戻る