背景画像をJavaScriptで書き換える

特定の条件時にJavaScriptで背景画像を書き換えようとしたときに少し実装方法に迷ったので、やり方をメモしておきます。

通常時

まずは背景画像変更前のサンプルです。

HTML

<div class="box"></div>

CSS

.box {
	width: 480px;
	height: 300px;
	background: url(./img01.jpg) left top no-repeat;
}

変更前のデモページ
　

background-imageを直接指定する方法

background-imageプロパティに直接指定します。
この時、url()の中は"で括らないとIEでは表示されないようです。

JavaScript

$(function() {
	$('.box').css({
		backgroundImage: 'url("../img02.jpg")' // "" で括っていないとIEでは表示されない
	});
});

background-imageを直接指定する方法のデモページ
　

JavaScriptで背景画像を変更する際の注意点ですが、background-imageプロパティをHTMLに直接記述する形になるので、画像までのパスがHTMLを基準にして記述する必要があります。
複数ページで同じ書き換えを行う場合、相対パスで記述していると階層が違うファイルではうまく読み込めません。

background-imageを直接指定する方法のデモページ2(階層の違うページ)

そのため、階層の違う複数ファイルで書き換えを行う場合は、ルートパスか絶対パスでの記述が必要になります。
　

background-imageを置換する方法

background-imageの値を取得して、文字列の一部を置換します。

JavaScript

$(function() {
	$('.box').css({
		backgroundImage: $('.box').css('background-image').replace('img01.jpg', 'img02.jpg')
	});
});

background-imageを置換する方法のデモページ
background-imageを置換する方法のデモページ2(階層の違うページ)
　

background-imageの値を取得、変更する文字列を置換して、再度background-imageに指定しています。
background-imageの値を取得した時点で絶対パスでの取得になるので、こちらの場合はパスを気にする必要がありません。
直接指定より使いやすいと思いますが、あまり複雑なパスの置換が必要になる場合はやりにくいかもしれません。