jQueryで背景画像を変える時にIEでの対処法【JS】

『jQueryで背景画像を変えれるようにする』という要件があり、スクリプトを書いたのですが、IEだけ動かなかったことがありました。そのときにとった対処法です。

『要素をクリックしたときにスタイルを変える』というだけのいたってシンプルなことなので、さっと下記のように書きました。

$("#btn").click(function(){
	$(".hoge").css('background', 'url(背景画像) repeat top center');
});

上記のようなスクリプトをすぐに思いつくのではないかと思います。しかし、これだとFirefoxやChromeでは何の問題もなく動作するのですが、IEだけどうも動作しないという現象が起っていました。もしかしたら、このケースだけの問題なのかもしれませんが・・・

下記のように書き直したら、何事もなかったかのようにIEで動作しました。

$("#btn").click(function(){
	$(".hoge").css({
		"background-image" : url(背景画像),
		"background-repeat" : "repeat",
		"background-position" : "top center"
	});
});

CSSで言うところのbackgroundプロパティのショートハンドの記述をやめて、background-imageプロパティやbackground-repeatプロパティを個別に指定するやり方です。

なぜこうならざるを得なかったは深く追求してないので、分かりませんが、何かIEで動きがおかしい場合は、お試しください。