web-dev-qa-db-ja.com

JQuery CSSプロパティを使用して背景画像を設定する

imageUrl変数に画像のURLがあり、jQueryを使用してそれをCSSスタイルとして設定しようとしています。

$('myObject').css('background-image', imageUrl);

これはうまくいかないようです。

console.log($('myObject').css('background-image'));

noneを返します。

どんな考え、私が間違っているのか？

javascriptjquerycss
350
Blankman

おそらくこれがほしいと思うでしょう（普通のCSS背景画像宣言のようにするため）：

$('myObject').css('background-image', 'url(' + imageUrl + ')');
875
Greg

このようにimageUrlの前後に二重引用符（ "）を含めることができます。

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

こうすれば、画像にスペースがある場合でも、プロパティとして設定されます。

67
Arosboro

他の人が正しく示唆していることの代わりに、個々のCSS設定（特に背景画像のURL）ではなく、通常はCSSクラスを切り替えるほうが簡単だと思います。例えば：

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');
46
Kon

これが私のコードです：

$（ 'body'）。css（ 'background-image'、 'url（ "/ apo/1.jpg"）'）;

お楽しみください、友達

15
Apo

他の答えに加えて、あなたは「背景」を使うこともできます。これは、背景での画像の使用方法に関連する他のプロパティを設定したい場合に特に便利です。

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
13
Matt Parkins

変数ではなく実際のURLを使っている人のために：

$('myObject').css('background-image', 'url(../../example/url.html)');
6
Dusty

"style"属性を修正してみてください。

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
3
appcropolis

救助への文字列補間。

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);
2
Sushanth --

私が抱えていた問題は、url()値の最後にセミコロン;を追加し続けたため、コードが機能しなかったことです。

NOT WORKING CODE：

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

作業コード：

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

作業コードの末尾のセミコロン;が省略されていることに注意してください。私は単に正しい構文を知らなかっただけで、それに気づくのは本当に難しいです。うまくいけば、これは同じ船に乗っている他の人の助けになるでしょう。

0
Prid