zmiana background diva jako Image- w javascript

pytanie zadane 3 listopada 2015 w JavaScript przez Wiciorny Ekspert (269,790 p.)

Witajcie napisałem kod na zmiane tła diva, jednak nic się nie wykonuje ?

Problem moim zdaniem leży w if statement... i tutaj prawdopodobnie zadeklarowana zmienna, nie ma tej wartości co oczekuje.

function change()

{
	
	var foto= document.getElementById("mainImage").style.backgroundImage;
	console.log(foto);
	 if(foto == 'url(main.jpeg)')
	 {
		 foto.style.backgroundImage='url(main2.jpg)';
	 } 
	 else if( foto == 'url(main2.jpg)') 
	 {
	foto.style.backgroundImage= "url(main.jpeg)";
	 }
	
	setTimeout("change()", 7000);
}

oczywiście w HTML MAM 

<body onload="change();">

DIV PREZENTUJE SIĘ TAK : <div id="mainImage"></div>

A jego stylizacja w css

#mainImage
{

   height: 500px;
   background-image:url(main.jpeg);
   background-repeat:no-repeat;
   background-size: 100% 100%;

}

oczywiscie to wycięte fragmenty kodu dzięki bardzo za pomoc

Dodam, że zmieniając na style.background i w CSS na bacground: url(... obrazek); jest to samo

2 odpowiedzi

odpowiedź 3 listopada 2015 przez Mlody89 Mądrala (6,920 p.)

1.Nie działa z tego względu że ta instrukcja odwołuje sie do atrybutu style w html. Spróbuj do diva dopisać

style='background-image: url("main.jpeg")'

2. Zmienna przyjmuje wartość zapisaną we właściwości background-image w atrybucie style więc później nie odwołujesz się do tej właściwości w zmiennej tylko bezpośrednio nadpisujesz wartość zmiennej

3. na koniec musisz podmienic wartość url ze zmienioną wartością zapisaną w zmiennej foto

http://codepen.io/anon/pen/epjrzb

Jeżeli chcesz się odwołać do CSSa najlepiej zrobić to przez jQuery i metodę .css()

komentarz 3 listopada 2015 przez Wiciorny Ekspert (269,790 p.)

Okej dzięki faktycznie tak zrobiłem, nawet działało podając ŚCIEŻKE DO pliku w if;ie

Czy samym JS bez JQuery da się odwołać do css?

komentarz 3 listopada 2015 przez Comandeer Guru (601,110 p.)

Tak, element.style

komentarz 3 listopada 2015 przez Wiciorny Ekspert (269,790 p.)

element jako funkcja obiektu, czy element- to obiekt? Bo generalnie element.style to ja zadeklarowałem tak jak u mnie w kodzie i to nie działa, tzn nie odwołuje się do css

odpowiedź 3 listopada 2015 przez Wiciorny Ekspert (269,790 p.)

Problem w tym, że działa jedynie kiedy napiszę.

 if( foto == "url(file:///C:/Users/Rel/Desktop/webinar/main.jpeg)")
	 {
		document.getElementById("mainImage").style.backgroundImage="url('main2.jpg')";
		
	 } 
	 else if( foto == "url(file:///C:/Users/Rel/Desktop/webinar/main2.jpg)") 
	 {
		document.getElementById("mainImage").style.backgroundImage="url('main.jpeg')";
	 }

Zwraca mi odwołanie całą ścieżke do pliku, da się zwrócić sam string?

komentarz 3 listopada 2015 przez Comandeer Guru (601,110 p.)

Możesz zastosować substr, żeby wyciąć odpowiednią część tego ciągu.

komentarz 4 listopada 2015 przez Wiciorny Ekspert (269,790 p.)

załóżmy, że zmienie i przeniose folder ... z całą stroną wtedy ... zmieni mi sie automatycznie url i wszystko sie wysypie- co powduje, że moje rozwiazanie dzialania jest niepoprawne