JavaScript

背景画像をJavaScriptで入れ替える2種類の方法

style_backgroundImage

ものごとには「正解」というものがひとつではない、ってことが多いもんです。
プログラミングでもそれは同じ。

オブジェクトの背景画像を入れ替える方法も複数あります。
jQueryを使ったやり方は簡単で可読性もいいのですが、
実行速度が少し遅いんですよね。

Webアプリをデザインしていると
その遅さが気になってくるところがあります。

例えばボタンの動作が一瞬おくれるとか。。。

速度を気にするのなら
jQueryは使わないほうがいいですよ。

//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って便利ですからね〜、うまく適材適所ということで。