ものごとには「正解」というものがひとつではない、ってことが多いもんです。
プログラミングでもそれは同じ。
オブジェクトの背景画像を入れ替える方法も複数あります。
jQueryを使ったやり方は簡単で可読性もいいのですが、
実行速度が少し遅いんですよね。
Webアプリをデザインしていると
その遅さが気になってくるところがあります。
例えばボタンの動作が一瞬おくれるとか。。。
速度を気にするのなら
jQueryは使わないほうがいいですよ。
1
2
3
4
5
6
7
8
| //jQueryを使った書き方
$('#hoge').css("background-image","url('/img/hoge.png')");
//jQueryを使わない速度重視の書き方
//DOM取得
var objID = document.getElementById('hoge');
//リンクを設定
objID.style.backgroundImage = "url(img/hoge.png)"; |
//jQueryを使った書き方
$('#hoge').css("background-image","url('/img/hoge.png')");
//jQueryを使わない速度重視の書き方
//DOM取得
var objID = document.getElementById('hoge');
//リンクを設定
objID.style.backgroundImage = "url(img/hoge.png)";
ちなみに
DOMの取得は関数の一番最初のほうでやっておくのがいいです。
DOM取得のやり方は、
背景画像を変えるときだけではなくCSSとか全般の話ですよ♪
▼jQueryって便利ですからね〜、うまく適材適所ということで。
西畑 一馬 アスキー・メディアワークス 2010-02-12
