Festlegen des Hintergrundbilds mithilfe der jQuery CSS-Eigenschaft

378

Ich habe eine Bild-URL in einer imageUrlVariablen 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'));

kehrt zurück none.

Irgendeine Idee, was ich falsch mache?

javascript jquery css

— Blankman
quelle

1

Was genau ist das Problem? Wirft Jquery einen Fehler?

— Mike_G

Nein, es ist nicht richtig eingestellt. Ich protokolliere es und es ändert sich einfach nicht.

— Blankman

2

Beim ersten Mal versucht jQuery nicht zu erraten, was der Benutzer gemeint hat.

— Gblazex

925

Sie möchten dies wahrscheinlich (um es wie eine normale CSS-Hintergrundbilddeklaration zu machen):

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

— Greg
quelle

Ich habe es so gemacht - aber ein Leerzeichen zwischen 'url' und den linken Klammern führte dazu, dass mein Code fehlschlug. Kopieren Sie Ihre / fügen Sie sie ein und erkennen Sie das Problem. Vielen Dank!

— pmartin

Ich verwende Ihren Code in diesem Skript, erhalte aber ein Hintergrundbild: url ((unbekannt)); Dies ist mein Skript: var bg_img = jQuery ('. Wp-show-posts-inner'). Attr ('data-src'); jQuery ('. wp-show-posts-inner'). on ('mouseover', function () {jQuery ('. home-banner .bg'). css ('hintergrundbild', 'url (' + bg_img + ')');}); Irgendeine Idee warum?

— Gaston Coroleu

71

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.

— Arosboro
quelle

6

in diesem Fall sollte es sein$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro

4

Zitate sind nicht erforderlich: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullability

Das hat es für mich gelöst. Ich musste doppelte Anführungszeichen haben. Meine Bildnamen enthalten Leerzeichen. Sonst würde nichts passieren. Ich könnte so etwas wie $('.myObject').css('background-color', 'green'); arbeiten lassen, aber das Bild nicht ohne doppelte Anführungszeichen ändern. Vielen Dank!

— Ghost Echo

1

encodeURIComponentfunktioniert nicht, wenn ein Teil Ihrer URL bereits URL-Escapezeichen enthält. Sie sollten jedoch potenziellen doppelten Anführungszeichen in imageUrl entkommen:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier

Übrigens $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');gab mir das Tunbackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— Daerik

47

Alternativ zu dem, was die anderen richtig vorschlagen, fällt es mir normalerweise leichter, CSS-Klassen umzuschalten, anstatt einzelne CSS-Einstellungen (insbesondere Hintergrundbild-URLs). 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');

— Kon
quelle

2

Dies ist eine viel bessere Möglichkeit, Dinge zu tun, da Sie damit einen CSS-Pre-Prozessor verwenden können.

— Calumbrodie

Das ist großartig, viel besser als die direktere Lösung.

— Magicode

Dadurch werden jedoch beide Bilder geladen.

— Sheriffderek

Ist das eigentlich eine empfohlene Lösung? Es scheint, dass dies unnötig mehr Informationen erfordert, z. B. falls es ein drittes mögliches Hintergrundbild gibt, müssen Sie alle anderen Hintergrundbilder entfernen oder alternativ das "aktuelle" Bild verfolgen. Und auch Konfigurationsdetails wie diese URIs in den CSS-Dateien zu haben, macht mich verrückt. : smiley: Ich muss den ganzen Code durchsuchen!

— Anne van Rossum

Die Verwendung solcher Klassen ist auch meine Präferenz, da Sie so eine saubere Trennung zwischen Code und Stil beibehalten können. Ich kann dann alle meine Bilder und Animationen in der CSS ändern (über Medienselektoren und dergleichen), ohne mit dem Code herumzuspielen. Sie müssen nicht den gesamten Code durchsuchen, wenn Sie Ihre Bilder außerhalb des Codes halten!

— Evan Langlois

14

Hier ist mein Code:

$ ('body'). css ('Hintergrundbild', 'url ("/ apo / 1.jpg")');

Viel Spaß, Freund

— Apo
quelle

13

Neben 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");

— Matt Parkins
quelle

Diese Antwort machte mehr Sinn, als ich dachte, die ursprüngliche Operation hätte Hintergrund und nicht Hintergrundbild verwendet. Ich habe meine Antwort geändert, um mehr Sinn zu machen, und ich werde dies trotzdem der Nachwelt überlassen.

— Matt Parkins

6

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

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

— Staubig
quelle

3

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

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

— Appcropolis
quelle

1

ersetzt alle anderen Stile. Nicht empfohlen

— Melvin

2

String-Interpolation zur Rettung.

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

— Sushanth -
quelle

1

Das Problem, das ich hatte, war, dass ich ;am Ende des url()Werts immer wieder ein Semikolon hinzufügte , wodurch der Code nicht mehr funktionierte.

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.

— Prid
quelle

0

Vergessen Sie nicht, dass mit der CSS-Funktion jQuery Objekte übergeben werden können, mit denen Sie mehrere Elemente gleichzeitig festlegen können. Der beantwortete Code würde dann folgendermaßen aussehen:

$(this).css({'background-image':'url(' + imageUrl + ')'})

— Antonius
quelle

-3

$ ('myObject'). css ({'Hintergrundbild': 'url (imgUrl)',});

— Wahaj
quelle

Dies funktioniert nicht, da die URL in einfache Anführungszeichen gesetzt ist.

— Sal