Bir div'in arka plan resmi URL'sini JavaScript ile nasıl belirleyebilirim?

JavaScript kullanarak arka plan görüntüsünün nasıl değiştirileceğiyle ilgili pek çok bilgi buldum, ancak hangi arka plan görüntüsünün görüntüleneceğini belirlemek için JavaScript kullanmaya çalışıyorum. Görüntüyü ayarlamak için kod şöyledir: Ben arka plan görüntüsü url erişmek için aklınıza gelebilecek her birlikte çalıştılarBir div'in arka plan resmi URL'sini JavaScript ile nasıl belirleyebilirim?

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

, ama şimdiye kadar hiçbir zar:

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

Herkes biliyor mu Bunu yapmak için? Mümkün mü?

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

GÜNCELLEME: Ben aşağıdaki çalıştırırsanız

, çalışır:

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

BTW, burada görüntü başında CSS'deki ayarlanırken yoludur

Ancak, CSS dosyasında önceden tanımlanmış olsa bile, JavaScript özelliğine ayarlanıncaya kadar URL özelliğine erişemiyorum. Ham CSS ayarının erişilebilir olmasının bir nedeni var mı?

kaynak

2010-01-20 user77413

saklanan arkaplan görüntü dosyası isimlerini içeren bir dizi kullanarak tarafından, görüntüler hangi div hangi takip geçti. style.backgroundImage'? – kennytm

Evet, style.background, style.background.image, style.background.url, style.background.image.url, style.background.value, style.background.image.value, style.backgroundImage.value öğelerini denedim de. Teşekkürler. – user77413

@openid_kenja: Öğenin hesaplanan stilini almalısınız - güncellenmiş cevabımı görün. –

bu deneyin :

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

kaynak

2010-01-20 20:11:42 Mic

Basit. Zarif. Eserleri. Herkese yardımları için teşekkür ederim! – user77413

Sen background özelliğini ayarlayarak ediyoruz, background ve backgroundImagebackgroundImagebackground ayarladıktan sonra boş yüzden iki ayrı özellikleridir. css belgelerinde belirlediği stillerle ilgili

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 
}

: Eğer arka plan özelliğinin sadece url kısmı erişmek istiyorsanız, aşağıdaki kodu kullanabilirsiniz

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;

kaynak

2010-01-20 19:15:38

Hem arka plan hem de backgroundImage özellikleriyle erişmeyi denedim ve hiçbiri bir şey döndürmedi. BTW, orijinal soruyu, CSS'nin başlangıçta nasıl ayarlandığını içerecek şekilde güncelledim. Teşekkürler. – user77413

Bu durumda IE için 'currentStyle'ı ve diğer tarayıcılar için' getComputedStyle() 'kullanmanız gerekir. –

arka plan mülkü al:

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

görüntüler: Andy E'nin An: url

Düzenleme (/ images/datepicker_open.png içerir) swer ihtiyacın olana yakın olmalı. Farklı olarak yaptıktan sonra IE için size

currentStyle.backgroundImage

yerine

currentStyle.background

kaynak

2010-01-20 19:16:08 rosscj2533

Bu, boş bırakılıyor. – user77413

bu o

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

Tüm stil özelliklerini almak için aşağıdakileri yapabilirsiniz yapmalıyım gerektiğidir değişiklikler ... yeni şeylerin nereye gittiğini görüyorsunuz ...

burada katacak boyunca ben gitmek gibi

[DÜZENLE] ..
Google Chrome: style['background-image']
Firefox 3.5.7: style.background
IE 6: Windows için tüm tarayıcılar (IE6, IE7, FF 3.5.7 Google Chrome, Opera 10.10, Safari 4.0.4) üzerinde style.background

style.backgroundImage eser ..

kaynak

2010-01-20 19:20:56

Bu Tanımsız geri dönüyor. – user77413

Bu krom üzerinde çalışır, ama gerçekten FF başarısız olur .. –

Yukarıdaki bazı durumlarda ekledim .. –

Bu yöntemleri kullanmayın. Yapabiliyorsanız arkaplan görüntülerini bir dizide takip edin. Farklı tarayıcılar, arka plan resmi değerini elde etmeye çalışırken farklı sonuçlar döndürür.

Firefox döndürür: 'url("../images/someimagefile.jpeg")'

Krom dönecektir olacaktır: 'url("https://www.yourdomain/images/someimagefile.jpeg")'

Sadece fazla soruna oluşturarak Bana sorarsan - tabletler dahil - Tarayıcı yanıtlarıyla ve belirsizlik.

Önce arka plan resmi dosya adını okumaya çalışırken yukarıdaki yöntemleri kullandım ve istediğimden daha fazla soruna neden oldular - mobil aygıtlarda da dahil olmak üzere.
Sana `yerine` arasında .style.background` denediniz dizide

kaynak

2012-12-28 23:08:05 KDawg

Bir div'in arka plan resmi URL'sini JavaScript ile nasıl belirleyebilirim?

cevap

İlgili konular