Tôi có thể nhận url hình nền của div không?

Question

Tôi có một nút trong đó khi tôi nhấp vào, tôi muốn cảnh báo URL hình nền của #div1.

Có thể không?

Answer 1

Tôi thường thích .replace() để biểu thức thông thường khi có thể, vì nó thường dễ dàng hơn để đọc: http://jsfiddle.net/mblase75/z2jKA/2

$("div").click(function() { 
     var bg = $(this).css('background-image'); 
     bg = bg.replace('url(','').replace(')','').replace(/\"/gi, ""); 
     alert(bg); 
    }); 

Answer 2

Vâng, đó là có thể:

$("#id-of-button").click(function() { 
    var bg_url = $('#div1').css('background-image'); 
    //^Either "none" or url("...urlhere..") 
    bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url); 
    bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise "" 
    alert(bg_url); 
}); 

Answer 3

Như đã đề cập, Blazemongers giải pháp được không xóa dấu ngoặc kép (ví dụ: trả lại bằng Firefox). Kể từ khi tôi tìm thấy Rob Ws giải pháp là khá phức tạp, thêm 2 cent tôi ở đây:

$('#div1').click (function(){ 
    url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,''); 
    alert(url); 
}) 

Answer 4

tôi đã cải thiện đôi chút câu trả lời, mà xử lý các định nghĩa CSS mở rộng như:

background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136)) 

mã JavaScript:

var bg = $("div").css("background-image") 
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '') 

Kết quả:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png" 

Answer 5

Tôi đang sử dụng này một

function getBackgroundImageUrl($element) { 
    if (!($element instanceof jQuery)) { 
     $element = $($element); 
    } 

    var imageUrl = $element.css('background-image'); 
    return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself 
    } 

Answer 6

Tôi nghĩ rằng việc sử dụng một biểu thức chính quy cho việc này là bị lỗi chủ yếu là do

• Sự đơn giản của nhiệm vụ
• Chạy một biểu thức chính quy phải lúc nào cũng hơn cpu chuyên sâu/dài hơn cắt một chuỗi.

Kể từ khi url (" và ") thành phần là hằng số, cắt chuỗi của bạn như vậy:

$("#id").click(function() { 
    var bg = $(this).css('background-image').trim(); 
    var res = bg.substring(5, bg.length - 2); 
    alert(res); 
}); 

Answer 7

Sử dụng chỉ một cuộc gọi đến replace (regex phiên bản): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

Answer 8

Dưới đây là một regex đơn giản sẽ xóa url(" và ") khỏi chuỗi được trả về.

var css = $("#myElem").css("background-image"); 
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");