การตั้งค่าภาพพื้นหลังโดยใช้คุณสมบัติ jQuery CSS

377

ฉันมี URL รูปภาพในimageUrlตัวแปรและฉันพยายามตั้งค่าเป็นสไตล์ CSS โดยใช้ jQuery:

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

ดูเหมือนว่าจะไม่ทำงานเนื่องจาก:

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

noneผลตอบแทน

ความคิดใด ๆ ที่ฉันกำลังทำผิดอยู่?

javascript jquery css

— Blankman
แหล่งที่มา

1

ปัญหาคืออะไร Jquery กำลังโยนข้อผิดพลาดหรือไม่?

— Mike_G

ไม่การตั้งค่าไม่ถูกต้อง ฉันบันทึกมันและมันก็ไม่เปลี่ยนแปลง

— Blankman

2

ครั้งแรกที่ jQuery ไม่พยายามเดาความหมายของผู้ใช้

— gblazex

924

คุณอาจต้องการสิ่งนี้ (เพื่อทำให้มันเหมือนกับการประกาศภาพพื้นหลัง CSS ปกติ):

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

— เกร็ก
แหล่งที่มา

ฉันทำเช่นนี้ - แต่ช่องว่างระหว่าง 'url' และวงเล็บซ้ายทำให้รหัสของฉันล้มเหลว คัดลอก / วางของคุณและรับรู้ปัญหา ขอบคุณ!

— pmartin

ฉันใช้รหัสของคุณในสคริปต์นี้ แต่ให้ฉันได้ภาพพื้นหลัง: url ((ไม่ทราบ)); นี่คือสคริปต์ของฉัน: var bg_img = jQuery ('. wp-show-posts-inner'). attr ('data-src'); jQuery ('. wp-show-posts-inner'). on ('mouseover', function () {jQuery ('. home-banner .bg'). css ('background-image', 'url (' + bg_img + ')');}); มีความคิดอะไรบ้าง

— Gaston Coroleu

71

คุณจะต้องใส่เครื่องหมายคำพูดคู่ (") ก่อนและหลัง imageUrl ดังนี้:

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

วิธีนี้หากภาพมีช่องว่างก็จะยังคงถูกตั้งค่าเป็นคุณสมบัติ

— Arosboro
แหล่งที่มา

6

ในกรณีนี้ควรเป็น$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro

4

ไม่จำเป็นต้อง

— ใส่เครื่องหมาย

วิธีนี้แก้ไขได้สำหรับฉัน ฉันต้องมีเครื่องหมายคำพูดคู่ ชื่อภาพของฉันมีช่องว่าง มิฉะนั้นจะไม่มีอะไรเกิดขึ้น ฉันสามารถ$('.myObject').css('background-color', 'green'); ทำงานได้ แต่ไม่เปลี่ยนภาพโดยไม่ต้องใส่เครื่องหมายอัญประกาศ ขอบคุณ!

— Ghost Echo

1

encodeURIComponentจะไม่ทำงานหากส่วนหนึ่งของ URL ของคุณมีอักขระที่หลีกเลี่ยง URL อยู่แล้ว คุณควรหลีกเลี่ยงอักขระคำพูดคู่ที่มีศักยภาพใน imageUrl แม้ว่า:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier

โดยการ$('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');ทำให้ฉันbackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— Daerik

47

อีกวิธีหนึ่งคือสิ่งที่คนอื่นแนะนำอย่างถูกต้องฉันพบว่ามันง่ายกว่าที่จะสลับคลาส CSS แทนการตั้งค่า CSS แต่ละรายการ (โดยเฉพาะ URL รูปภาพพื้นหลัง) ตัวอย่างเช่น:

// 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
แหล่งที่มา

2

นี่เป็นวิธีที่ดีกว่ามากในการทำสิ่งต่าง ๆ เพราะช่วยให้คุณใช้โปรเซสเซอร์ css pre

— calumbrodie

นี่ดีมากดีกว่าทางออกตรงกว่า

— Magicode

นี่กำลังจะโหลดทั้งสองอิมเมจ

— Sheriffderek

นี่เป็นโซลูชันที่แนะนำจริงหรือ ดูเหมือนว่าสิ่งนี้ต้องการข้อมูลเพิ่มเติมโดยไม่จำเป็นเช่นในกรณีที่มีภาพพื้นหลังที่เป็นไปได้ที่สามคุณจะต้องลบภาพพื้นหลังอื่นทั้งหมดหรือติดตามภาพ "ปัจจุบัน" และยังมีรายละเอียดการกำหนดค่าเช่น URIs เหล่านี้ในไฟล์. css ทำให้ฉันบ้า : smiley: ฉันต้องค้นหารหัสทั้งหมด!

— Anne van Rossum

การใช้คลาสเช่นนี้ก็เป็นความชอบของฉันด้วยเพราะมันช่วยให้คุณแยกความแตกต่างระหว่างโค้ดและสไตล์ได้อย่างชัดเจน ฉันสามารถเปลี่ยนรูปภาพและภาพเคลื่อนไหวทั้งหมดของฉันใน css (ผ่านตัวเลือกสื่อบันทึกและอื่น ๆ ) โดยไม่ต้องยุ่งเกี่ยวกับโค้ด คุณไม่จำเป็นต้องค้นหารหัสทั้งหมดหากคุณไม่เก็บรูปภาพไว้ในโค้ด!

— Evan Langlois

14

นี่คือรหัสของฉัน:

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

สนุกกับเพื่อน

— Apo
แหล่งที่มา

13

นอกเหนือจากคำตอบอื่น ๆ คุณยังสามารถใช้ "พื้นหลัง" สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการตั้งค่าคุณสมบัติอื่น ๆ ที่เกี่ยวข้องกับวิธีใช้ภาพพื้นหลังเช่น:

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

— แมตต์พาร์กินส์
แหล่งที่มา

คำตอบนี้สมเหตุสมผลมากขึ้นเมื่อฉันคิดว่า op ดั้งเดิมใช้พื้นหลังไม่ใช่ภาพพื้นหลัง ฉันได้แก้ไขคำตอบของฉันเพื่อให้เข้าใจได้ง่ายขึ้นและฉันจะปล่อยไว้ที่นี่เพื่อลูกหลาน

— Matt Parkins

6

สำหรับผู้ที่ใช้ URL จริงไม่ใช่ตัวแปร:

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

— เต็มไปด้วยฝุ่น
แหล่งที่มา

3

ลองแก้ไขแอตทริบิวต์ "style":

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

— appcropolis
แหล่งที่มา

1

จะแทนที่สไตล์อื่น ๆ ทั้งหมด ไม่แนะนำ

— เมลวิน

2

การแก้ไขสตริงเพื่อช่วยเหลือ

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

— สุสาทาน -
แหล่งที่มา

1

ปัญหาที่ฉันมีคือฉันยังคงเพิ่มเซมิโคลอน;ที่ส่วนท้ายของurl()ค่าซึ่งทำให้โค้ดไม่ทำงาน

ไม่ทำงานรหัส:

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

รหัสการทำงาน:

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

สังเกตเห็นเซมิโคลอน;ที่ละเว้นในตอนท้ายในรหัสการทำงาน ฉันไม่รู้จักไวยากรณ์ที่ถูกต้องและยากที่จะสังเกตเห็น หวังว่านี่จะช่วยคนอื่นในเรือลำเดียวกัน

— Prid
แหล่งที่มา

0

อย่าลืมว่าฟังก์ชั่น jQuery css อนุญาตให้ส่งผ่านวัตถุซึ่งอนุญาตให้คุณตั้งค่าหลายรายการพร้อมกัน รหัสตอบแล้วจะมีลักษณะเช่นนี้:

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

— แอนโทนี
แหล่งที่มา

-3

$ ('myObject'). css ({'background-image': 'url (imgUrl)',});

— wahaj
แหล่งที่มา

สิ่งนี้จะไม่ทำงานเพราะ URL ถูกห่อหุ้มด้วยเครื่องหมายคำพูดเดี่ยว

— Sal