Jak określić URL obrazu tła elementu div za pomocą JavaScript?

Znalazłem mnóstwo informacji o tym, jak zmienić obraz tła elementu div przy użyciu JavaScript, ale próbuję użyć JavaScript, aby określić, który obraz tła jest wyświetlany. Kod ustawić obraz idzie tak:Jak określić URL obrazu tła elementu div za pomocą JavaScript?

document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)";

Próbowałem wszystkich kombinacji mogę myśleć, aby uzyskać dostęp do URL obrazu tła, ale jak dotąd nie ma kości:

alert(document.getElementById("widgetField").style.backgroundImage.url); - returns Undefined 
alert(document.getElementById("widgetField").style.backgroundImage); - empty response 
alert(document.getElementById("widgetField").style.background); 
alert(document.getElementById("widgetField").style.background.image); 
alert(document.getElementById("widgetField").style.background.url); 
alert(document.getElementById("widgetField").style.background.image.url); 
alert(document.getElementById("widgetField").style.background.value); 
alert(document.getElementById("widgetField").style.background.image.value); 
alert(document.getElementById("widgetField").style.background.image.value); 
alert(document.getElementById("widgetField").style.backgroundImage.value);

Czy ktoś wie jak to zrobić? Czy to możliwe?

BTW, oto sposób obraz jest ustawiony w CSS na początku:

#widgetField { 
    width: 290px; 
    height: 26px; 
    background: url(../images/datepicker_closed.png); 
    overflow: hidden; 
    position: relative; 
}

UPDATE:

Jeżeli uruchomić następujące polecenie, to działa:

document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)"; 
alert(document.getElementById("widgetField").style.background);

Jednak nie mogę uzyskać dostępu do właściwości URL, dopóki nie zostanie ona ustawiona przez JavaScript, mimo że jest już zdefiniowana w pliku CSS. Czy istnieje powód, dla którego surowe ustawienie CSS nie jest dostępne?

Źródło

2010-01-20 user77413

Możesz próbowano '.style.background' zamiast'. style.backgroundImage'? – kennytm

Tak, wypróbowałem style.background, style.background.image, style.background.url, style.background.image.url, style.background.value, style.background.image.value, style.backgroundImage.value także. Dzięki. – user77413

@openid_kenja: Musisz uzyskać obliczony styl elementu - zobacz moją zaktualizowaną odpowiedź. –

Wypróbuj :

var img = document.getElementById('widgetField'), 
style = img.currentStyle || window.getComputedStyle(img, false), 
bi = style.backgroundImage.slice(4, -1);

Źródło

2010-01-20 20:11:42 Mic

Proste. Elegancki. Prace. Dziękuję wszystkim za pomoc! – user77413

Ty ustawienie właściwości background, background i backgroundImage są dwa oddzielne właściwości, dlatego backgroundImage jest pusty po ustawieniu background. Jeśli chcesz uzyskać dostęp tylko część URL własności tła, można użyć następującego kodu:

var wfBg = document.getElementById("widgetField").style.background; 
var wfBgUrl = wfBg.match(/(url\(['"]?([^)])['"]?\))/i); 

if (wfBgUrl) 
{ 
    // Add your code here. wfBgUrl[1] is full string including "url()", 
    // wfBgUrl[2] would be just the url inside the parenthesis 
}

przypadku stylów zawartych w dokumentach CSS:

if (window.getComputedStyle) // For standards compliant browsers 
    var wfBg = window.getComputedStyle(
     document.getElementById("widgetField") 
    ).getPropertyValue("background"); 
else // for IE 
    var wfBg = document.getElementById("widgetField").currentStyle.background;

Źródło

2010-01-20 19:15:38

Próbowałem uzyskać dostęp do niego za pośrednictwem właściwości background i backgroundImage i żadne nie zwraca niczego. BTW, zaktualizowałem oryginalne pytanie, aby uwzględnić sposób, w jaki CSS jest ustawiany na początku. Dzięki. – user77413

W takim przypadku musisz użyć 'currentStyle' dla IE i' getComputedStyle() 'dla innych przeglądarek. –

Get właściwość background:

alert(document.getElementById("widgetField").style.background);

Wyświetla: url (includes/images/datepicker_open.png)

Edit: AN Andy è za swer powinien być blisko tego, czego potrzebujesz. Jedną z różnic jest to, że dla IE trzeba

currentStyle.backgroundImage

zamiast

currentStyle.background

Źródło

2010-01-20 19:16:08 rosscj2533

To jest zwracanie Empty. – user77413

to powinien zrobić to

alert(document.getElementById("widgetField").style['background-image']);

można wykonać następujące czynności, aby uzyskać wszystkie właściwości stylu po dokonaniu zmienia się ... aby zobaczyć, gdzie się podziały nowe rzeczy ...

var style = document.getElementById("widgetField").style; 
    var allprops = ''; 
    for (i in style) 
    allprops += style[i] + ':' + i + '\n' ; 
    alert(allprops);

[EDIT] jak idę wzdłuż dodam tutaj ..
Google Chrome: style['background-image']
Firefox 3.5.7: style.background
IE 6: style.background

style.backgroundImage praca na wszystkich przeglądarek (IE6, IE7, FF 3.5.7, Google Chrome, Opera 10.10, Safari 4.0.4) dla systemu Windows ..

Źródło

2010-01-20 19:20:56

Powoduje niepowodzenie. – user77413

Działa na chrome, ale w rzeczywistości FF nie działa. –

Dodałem kilka przypadków powyżej .. –

Nie używaj tych metod. Śledź obrazy tła w tablicy, jeśli możesz. Różne przeglądarki zwracają różne wyniki, próbując uzyskać wartość obrazu tła.

Firefox powróci: 'url("../images/someimagefile.jpeg")'

Chrome powróci: 'url("https://www.yourdomain/images/someimagefile.jpeg")'

Tylko tworząc więcej problemów, jeśli chodzi o mnie - i niepewność z odpowiedziami do przeglądarek - w tym tabletek.

Użyłem powyższych metod, próbując najpierw odczytać nazwę pliku obrazu tła, i spowodowało więcej problemów niż chciałem - w tym na urządzeniach mobilnych.
przeszedłem do śledzenia których zdjęcia są w która div, przez użyciu tablicę z nazwami plików obrazu tła przechowywanych w tablicy

Źródło

2012-12-28 23:08:05 KDawg

Jak określić URL obrazu tła elementu div za pomocą JavaScript?

Odpowiedz

Powiązane problemy