Forum PHP.pl > Zmiana wartości styli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Mefiuu

29.01.2011, 18:42:40

Witam. Bawiąc się dalej z JavaScriptem zrobiłem sobie "przesuwający się klocek"

Ogólnie ma opcje przesunięcia w lewo, prawo, ustawienia na środku, pojawienia się i schowania oraz zmiany koloru. Całość wygląda tak:

[JAVASCRIPT] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Klocek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 
<script type="text/javascript">
	window.onload = Laduj;
 
	function Laduj () {
		document.getElementById('lewo').onclick = wLewo;
		document.getElementById('srodek').onclick = Srodek;
		document.getElementById('prawo').onclick = wPrawo;
		document.getElementById('pokaz').onclick = Pokaz;
		document.getElementById('schowaj').onclick = Schowaj;
		document.getElementById('color').onclick = Kolor;
	}
 
	function wLewo() {
		var blok = document.getElementById('blok');
 
		blok.style.marginLeft = '0px';
	}
 
	function Srodek() {
		var blok = document.getElementById('blok');
 
		blok.style.marginLeft = '200px';
	}
 
	function wPrawo() {
		var blok = document.getElementById('blok');
 
		blok.style.marginLeft = '400px';
	}
 
	function Pokaz() {
		var blok = document.getElementById('blok');
 
		blok.style.display = 'block';
	}
 
	function Schowaj() {
		var blok = document.getElementById('blok');
 
		blok.style.display = 'none';
	}
 
	function Kolor() {
		var losuj = Math.round(5*Math.random())
		var blok = document.getElementById('blok');
 
		switch(losuj) {
		case 1:
		  blok.style.backgroundColor = '#932';
		  break;
		case 2:
		  blok.style.backgroundColor = '#fc7';
		  break;
		case 3:
		  blok.style.backgroundColor = '#03a';
		  break; 
		case 4:
		  blok.style.backgroundColor = '#1ac';
		  break; 
		case 5:
		  blok.style.backgroundColor = '#9fb';
		  break;
		default:
		  blok.style.backgroundColor = '#069';
		}
	}
</script>
 
</head>
<body>
 
<a href="#" id="lewo">Przesuń w lewo</a> || <a href="#" id="srodek">Środek</a> || <a href="#" id="prawo">Przesuń w prawo</a> || <a href="#" id="schowaj">Schowaj</a> || <a href="#" id="pokaz">Pokaż</a> || <a href="#" id="color">Zmień kolor</a>
 
<div id="blok" style="width: 200px; height: 200px; background-color: #069; margin-left: 200px; margin-top: 100px; display: block;"></div>
 
 
</body>
</html>
[JAVASCRIPT] pobierz, plaintext

Całość działa na miarę moich oczekiwań. Jednak chciałem zrobić tak, że po wciśnięciu "w lewo" aby za każdym razem przesuwało mi się o -10px. Nie wiem jednak jak to wykonać. Dałem tak:

[JAVASCRIPT] pobierz, plaintext 
function wLewo() {
		var blok = document.getElementById('blok');
 
		blok.style.marginLeft -= 100;
	}
[JAVASCRIPT] pobierz, plaintext

Próbowałem też na inne możliwe sposoby, z cudzysłowami etc. jednak nie działa. Stąd moje pytanie: jak odjąć / dodać do wartości?

Drugie moje pytanie to: dlaczego nie mogę styli umieszczać w sekcji <head>? Wtedy mi żadna funkcja nie "łapie" że tam są. Muszą być liniowo dodane. A co jeśli będę miał zewnętrzny arkusz? Wtedy manipulacja odpada?

Pozdrawiam.

kamil4u

29.01.2011, 18:47:21

ad. 1 Dobrze dałeś, tylko zapomniałeś o jednostce. Warto też najpierw skonwertować wartość na liczbę( parseInt ), bo przy dodawaniu możesz mieć problem.
ad. 2 Możesz, ale zapis - el.style odwołuje się do atrybutu style(w HTML), są sposoby, aby dostać się na do styli zapisanych w head - było na forum(nawet sam kiedyś opisywałem to komuś ) - poszukaj, a znajdziesz

Mefiuu

29.01.2011, 18:58:11

dzięki, parseInt(); pomogło

co do tamtego 2 to rzeczywiście muszę poszukać ale to pewnie dopiero w dalszej nauce z JavaScriptem. Pozdrawiam.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.