DOMトレーニング

2010-07-08 00:27

このブログのサイドナビゲーションに配置してあるウィジェット

  • 最近の投稿
  • アーカイブ
  • カテゴリー
  • 最近のTweet

のタイトル(h3要素)にそれぞれ個別のアイコン(背景画像)を付けたい!と思っていたものの、ウィジェットなのでh3タグに id やら class やらを付けられず、断念しておりました。

が、最近かじり始めたJavaScript DOM を使えば実現できそうなので、勉強がてらトライ。どうにかこうにか実現できました。

備忘録的にコードをぺたり。

[javascript]<br /> window.onload = function() {<br /> var oElements = document.getElementById(‘sidebar’).getElementsByTagName(‘h3’);<br /> for (var i = 0; i < oElements.length; i++) {<br /> var oElement = oElements[i];<br /> switch (oElement.innerHTML) {<br /> case ‘最近の投稿’:<br /> oElement.style.backgroundImage = ‘url(/wp-content/themes/journalist/images/bitcons/flag.gif)’;<br /> break;<br /> case ‘アーカイブ’:<br /> oElement.style.backgroundImage = ‘url(/wp-content/themes/journalist/images/bitcons/document.gif)’;<br /> break;<br /> case ‘カテゴリー’:<br /> oElement.style.backgroundImage = ‘url(/wp-content/themes/journalist/images/bitcons/folder.gif)’;<br /> break;<br /> case ‘最近のTweet’:<br /> oElement.style.backgroundImage = ‘url(/wp-content/themes/journalist/images/bitcons/comment.gif)’;<br /> break;<br /> }<br /> }<br /> }<br />[/javascript]

onload イベント時に getElementById と getElementsByTagName を使ってサイドバーのh3要素を探し出し、case 文で h3要素のinnerHTML ごとに css の background-image を切り替える…

おお…楽しいぞ JavaScript…(笑)

(ただし、コードを書くに当たって参照してたサイトが 「getElementById」を「getElementsById」って書いてくれていたおかげで30分以上悩んでいたのは内緒だ)

しかし、改めてソースコード見たら background-image のURL、共通部分が冗長ですな。書き直すかー。気が向いたら。

あと、これを外部ファイルにしようと思っても、読み込み処理のタイムラグのせいで一筋縄にはいかないようで。これもそのうち対応したいっす。

あ、ソースコードの表示に際して、SyntaxHighlighter Evolved なるプラグインも導入させていただきました。導入に際してお借りしたフンドシはこちら。

WordPressにソースコードを綺麗に表示させるプラグイン SyntaxHighlighter Evolved を設置 | WordPressで綴るパソコン生活
http://kantan.hp2.jp/?p=647

あー、気持ちイイわこれ。色々覚えていきましょい。

Pocket