JavaScript, css (style) - dynamiczne zmienianie wyglądu strony.

Dodano: 2010-06-26

Większość osób wie jak bardzo dobrym rozwiązaniem jest używanie arkuszy stylów do ładnej prezentacji strony internetowej (CSS). Nie tylko ułatwiają one szybką zmianę wyglądu strony www jak i też umożliwiają łatwiejszą kontrolę nad prawidłowym wyświetleniem treści, zdjęć, animacji itp.

W przypadku dynamicznej zmiany wyglądu strony po wykonaniu operacji przez użytkownika na niej, można wykonać to na kilka sposobów:

  1. Zastosowanie tylko javascript.
  2. Zastosowanie css (style), javascript, DOM ;)

Javascript umożliwia szybką modyfikację strony nawet jeśli „webdeveloper” nie posiada dużej wiedzy z zakresu użycia technologi css, DOM. Do zmiany miejsca element na stronie używając javascript należy postąpić tak:

  1. Pobranie kodu źródłowego strony z tagu body
  2. Wydzielenie kodu odpowiedzialnego za wyświetlenie baneru.
  3. Pobranie reszty kodu.
  4. Zamiana miejscami (tutaj może nastąić rozczarowanie jeżeli zastosowano CSS).
//pseudo kod javascript
function changePlaceOfElement(){
	var sourceBody = document.body.innerHTML;
	var len = sourceBody.length;
	var readFrom = xx;
	var withOutElem = "";
	for (var i=readFrom; i < len; i++)
		withOutElem += sourceBody[i];

	document.body.innerHTML = withOutElem;
	// getSourceElem(sourceBody) - funkcja pobierająca obiekt
	document.body.innerHTML += getSourceElem(sourceBody);	
}	

Dla przykładu zostanie zmienione miejsce wyświetlania baneru reklamowego portalu cba.pl przy użyciu javascript. Baner zostanie wyświetlony na końcu strony - przynajmniej tak ma być ;p

UWAGA!!! Przykład ten nie ma na celu usunięcia baneru, tylko pokazania możliwości dynamicznej zmiany wyglądu strony.

Reset

Wady takiego wykorzystania javascript są oczywiste. Zmiana kolejności elementów, ich atrybutów, danych na stronie wiąże się z modyfikacją stałych w funkcji i może przyczynić się do nieprawidłowego działania skryptu. Zależność elementu od przypisanych właściwości w arkuszu stylów może nie dopuścić do modyfikacji strony w ten sposób. Rozwiązanie takie jest złe wiąże się z angażowaniem większej ilości zasobów komputera po stronie użytkownika (duża strona - dużo kodu).

Lepsze rozwiązanie to css, DOM i javascript razem, połączenie tych trzech elementów daje bardzo duże możliwości dla webdevelopera jak i jest bardziej odporne na zmiany treści na stronie:

  1. Pobranie elementu po przez jego id
  2. Zmiana właściwości elementu przy użyciu setAttribute().
//pseudo kod javascript
function changePlaceOfElem_v2(){
	var tb = document.getElementsById("ELEM");
	tb.setAttribute('style', 'margin-top:500px;');
}

Wykorzystanie id umożliwia pewności modyfikacji konkretnego elementu.

Dla przykładu zostanie zmienione miejsce wyświetlania baneru reklamowego portalu cba.pl przy użyciu DOM, javascript i css (style). Baner zostanie wyświetlony na końcu strony - przynajmniej tak ma być ;p

Reset