javascript - Ställa in bakgrundsbild med hjälp av jQuery CSS-egenskap

Jag har en bild-URL i en imageUrl-variabel och försöker sätta den som CSS-stil, med jQuery:

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

Det verkar inte fungera, eftersom:

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

returnerar none.

Någon idé om vad jag gör fel?

Svar #1

Du vill förmodligen ha detta (för att göra det som en vanlig CSS background-image-deklaration):

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

Svar #2

Du kommer att vilja inkludera dubbla citattecken (") före och efter imageUrl på det här sättet:

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

På så sätt, om bilden har mellanslag kommer den fortfarande att sättas som en egenskap.

Svar #3

Alternativt till vad de andra korrekt föreslår, tycker jag vanligtvis att det är lättare att växla CSS-klasser, istället för individuella CSS-inställningar (särskilt bakgrundsbilds-URL:er). Till exempel:

// 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');

Svar #4

Här är min kod:

$('body').css('background-image', 'url("/apo/1.jpg")');

Njut, vän

Svar #5

Ytterligare till de andra svaren kan du också använda "background". Detta är särskilt användbart när du vill ställa in andra egenskaper som rör hur bilden används av bakgrunden, såsom:

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

Svar #6

Problemet jag hade var att jag fortsatte att lägga till ett semikolon ; i slutet av url()-värdet, vilket hindrade koden från att fungera.

❌ FUNKAR INTE KOD:

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

✅ FUNKANDE KOD:

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

Observera det utelämnade semikolonet ; i slutet i den fungerande koden. Jag visste helt enkelt inte den korrekta syntaxen, och det är verkligen svårt att märka det. Förhoppningsvis hjälper detta någon annan i samma situation.

Relaterade artiklar