ブラウザ毎に異なる記述が必要な DOM 操作をいくつかピックアップしてみました。基本は IE の条件付コンパイルを使用しています。

DOM で動的にイベント追加メソッド
スタイル要素にアクセスし CSS 記述を動的に追加
要素を要素で囲む
現在要素に割り当てられているスタイルを取得

DOM で動的にイベント追加メソッド

『onClick=○○』のような記述と違い、イベントを上書きする危険がありません。
対象要素は getElementById とかでどうにか取得して下さい。

イベント種類
イベントを追加するエレメント
クリップボードへのコピーも行う場合はチェック( InternetExplorer のみ)
cc_on 宣言がまだならチェック
結果

引数 e にはイベントオブジェクトが格納されるので

とすればイベントの発生した要素を取得できます。バブルするイベントをルートノードで監視する際などに便利です。


スタイル要素にアクセスし CSS 記述を動的に追加

スタイル"属性"ではありません。rules 配列の最後に追加します。

selecter
proparty
クリップボードへのコピーも行う場合はチェック( InternetExplorer のみ)
cc_on 宣言がまだならチェック
結果

要素を要素で囲む

<span>あ</span> → <div><span>あ</span></div> みたいな。
親要素は createElement とかでがんばって作ってください。
DOM Level2 の内容も入っているので 2008 年現在の各ブラウザに対応するためにはかなり複雑になってしまいます。

囲われる子要素
囲う親要素
クリップボードへのコピーも行う場合はチェック( InternetExplorer のみ)
cc_on 宣言がまだならチェック
結果

現在要素に割り当てられているスタイルを取得

style 要素と style 属性を合わせた表示されている通りのスタイル。
スタイルを受け取った変数を使って、○○.fonSize とか自由に調べることができます。

スタイルを受け取る変数名
対象エレメント
クリップボードへのコピーも行う場合はチェック( InternetExplorer のみ)
cc_on 宣言がまだならチェック
結果

ご意見・ご指摘等ございましたらお願い致します。(雑記帳へ
ホームページへ戻る