Dynamiczna zmiana stylu

pytanie zadane 28 kwietnia 2015 w JavaScript przez sofnir Gaduła (4,690 p.)

Hej,

jaką komendą można oddziaływać na plik css? Przejdę do konkretów, oto mój kod:

<div id="wskazowka">
		<img class="foto" src="img/wskazowka.png"> /*obrazek przedstawiający wskazówkę jak od zegara*/
	</div>
	
	<div id="okienko"></div>
	
	<button id="guzik">UP</button>
	
	<script type="text/javascript">
		var x=0;
		document.getElementById("okienko").innerHTML = x;
		function zwieksz()
		{ 
			x=x+1;
			document.getElementById("okienko").innerHTML = x;			
		}
		document.getElementById('guzik').onclick = function() { zwieksz() }
	</script>

Teraz plik css:

.foto
{
	margin-left: 190px;
	width:20px;
	height:400px;
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

W jaki sposób w zależności od mojego x zmieniać kąt położenia tej mojej wskazówki? Męczę się z tym już od kilku dni i nie mogę sobie z tym poradzić. Bardzo proszę o pomoc.

Pozdrawiam, Sofnir

1 odpowiedź

odpowiedź 28 kwietnia 2015 przez adamsawicki Bywalec (2,260 p.)
wybrane 28 kwietnia 2015 przez sofnir

Najlepsza

Witam,

Użyj własności style w javascript.

Przykład:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

komentarz 28 kwietnia 2015 przez sofnir Gaduła (4,690 p.)

Super, o to mi chodziło, jesteśmy na dobrej drodze. Jeszcze tylko ostatnio sprawai będzie gotowe :) Jak zamiast tej stałej wartości 7 wstawić tam moją zmienną x? Wpisałem xdeg, ale nie działa.

komentarz 28 kwietnia 2015 przez adamsawicki Bywalec (2,260 p.)

Trzeba połączyć stringi :-)

var x = 7;

document.getElementById("myDIV").style.transform = "rotate("+x+"deg)";

komentarz 28 kwietnia 2015 przez sofnir Gaduła (4,690 p.)

Ok, teraz działa, tylko dlaczego jak moją funkcją zwiększam wartość x to ten kąt się nie zmienia? Ciągle kąt wynosi wartość jaką ma początkową.

komentarz 28 kwietnia 2015 przez adamsawicki Bywalec (2,260 p.)

Tak nie będzie działać :-) Zmieniając x musisz zmieniać "rotate("+x+"deg)" :-)

komentarz 28 kwietnia 2015 przez sofnir Gaduła (4,690 p.)

Kurcze, to cały mój misterny plan w piz... :D A znasz jakiś sposób, żeby w zależności od mojego x zmieniał się kąt? Myślałem, że to będzie działać, przecież to było logiczne -.-

komentarz 28 kwietnia 2015 przez sofnir Gaduła (4,690 p.)

HAHA! JUPI działa! Włożyłem tą komende do mojej funkcji i teraz za każdym razem kiedy wywołuje funkcje wykonuje się ta podmiana.

Wielkie dzięki za pomoc :)