wake-up-neo.net

Festlegen des Hintergrundbilds mithilfe der jQuery-CSS-Eigenschaft

Ich habe eine Bild-URL in einer imageUrl -Variablen und versuche, sie mit jQuery als CSS-Stil festzulegen:

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

Dies scheint nicht zu funktionieren, da:

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

gibt none zurück.

Irgendeine Idee, was ich falsch mache?

javascriptjquerycss
358
Blankman

Wahrscheinlich möchten Sie dies (um es wie eine normale CSS-Hintergrundbild-Deklaration zu machen):

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

Sie möchten doppelte Anführungszeichen (") vor und nach der imageUrl wie folgt einfügen:

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

Auf diese Weise wird das Bild, wenn es Leerzeichen enthält, weiterhin als Eigenschaft festgelegt.

67
Arosboro

Alternativ zu dem, was die anderen korrekt vorschlagen, finde ich es normalerweise einfacher, CSS-Klassen zu wechseln, anstatt einzelne CSS-Einstellungen (insbesondere URLs von Hintergrundbildern). Zum Beispiel:

// 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

Hier ist mein Code:

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

Viel Spaß, Freund

15
Apo

Zusätzlich zu den anderen Antworten können Sie auch "Hintergrund" verwenden. Dies ist besonders nützlich, wenn Sie andere Eigenschaften festlegen möchten, die sich auf die Art und Weise beziehen, wie das Bild vom Hintergrund verwendet wird, z.

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

Für diejenigen, die eine tatsächliche URL und keine Variable verwenden:

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

Versuchen Sie, das Attribut "style" zu ändern:

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

String-Interpolation zur Rettung.

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

Das Problem, das ich hatte, ist, dass ich ein Semikolon ; am Ende des Werts url() eingefügt habe, wodurch der Code nicht mehr funktioniert.

NICHT ARBEITSCODE: 

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

ARBEITSCODE:

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

Beachten Sie das ausgelassene Semikolon ; am Ende des Arbeitscodes. Ich kannte einfach nicht die richtige Syntax und es ist wirklich schwer, sie zu bemerken. Hoffentlich hilft das jemand anderem im selben Boot.

0
Prid