DHTML
DHTML nie jest technologią. To nazwa dla pewnego sposobu używania JavaScript.
Pole style
Każdy element dokumentu posiada pole style
, które odpowiada atrybutowi style
w XHTML. Można w ten
sposób przypisywać dowolne właściwości CSS (ukrywanie, zmiana koloru, pozycji) wybranemu elementowi, które są zawsze ważniejsze od właściwości nadanych przez arkusze stylów.
Pole style
to tylko dostęp do atrybutu style
w XHTML, dlatego nie da się przez nie odczytać stylów, które zostały nadane elementowi za pomocą arkuszy stylów.
Ponieważ używanie nazw pól z myślnikiem jest niewygodne w JavaScript, do odwoływania się do właściwości CSS używa się notacji wielbłądziej (ang. camel case), czyli zamiast pisać myślnik zaczyna się następne słowo wielką literą:
background-color: red
backgroundColor = 'red'
Wyjątkiem jest float
, który w JavaScript nazywa się cssFloat
, ponieważ „float” jest nazwą zarezerwowaną dla JavaScript.
Ukrywanie elementów
element.style.display = 'none'
Żeby przywrócić element lepiej nie zgadywać odpowiedniej dla niego wartości display
, tylko usunąć poprzednio nadaną wartość:
element.style.display = ''
Zmiana pozycji elementów
Na początek upewnij się, że element jest odpowiednio pozycjonowany, czyli ma ustawioną właściwość display
i zmiana
top
i left
będzie dawała pożądane rezultaty.
Potem już cała sztuka sprowadza się do zmiany właściwości top
i left
:
element.style.left = x + 'px';
element.style.top = y + 'px';
Uwaga na jednostki. Pole style
przyjmuje tylko prawidłowy CSS, a CSS wymaga podania jednostki do każdej odległości/wymiaru!
Zmiana wymiarów elementu
Można odczytać aktualną wielkość elementu za pomocą offsetWidth
i offsetHeight
(podana zawsze w pixelach). Można zmieniać wielkość ustalając style.width
i style.height
(w dowolnej jednostce, którą trzeba podać).
Pole className
Używanie pola style
może niepotrzebnie powiązać kod JavaScript z wyglądem strony i przy bardziej skomplikowanym wyglądzie elementów staje się trudne do
zmiany i ponownego zastosowania na innych stronach. Można temu zaradzić oddzielając zachowanie strony od jej wyglądu, tak samo jak należy oddzielać strukturę dokumentu od wyglądu.
Pole to nazywa się className
, bo nazwa „class” jest zarezerwowana dla przyszłych wersji JavaScript
Przydatne do tego jest pole className
, które zawiera klasy nadane elementowi (daje dostęp do atrybutu class
XHTML).
Zamiast ustawiać konkretne właściwości przez style
, można nadać odpowiednią klasę i nadać właściwości za pomocą arkusza stylów. W ten sposób jest wygodniej zmieniać więcej niż jedną
właściwość na raz oraz ławiej rozwijać skrypt i arkusze stylów, gdy każdy „robi swoje”.
element.className = 'nieaktywny'
.nieaktywny {color: #333; background: #eee; border: 1px inset #555;}
Klasy można używać razem z pseudoklasami :hover
i :active
, uwalniając kod JavaScript od obsługi zdarzeń onmouseover
/onmouseout
, onmousedown
/onmouseup
.
dodać gotowce do ustawiania i usuwania klas z elementu (tak, aby obsługiwać wiele klas jednocześnie)
function hasClass(obj,cName) {
return new RegExp('\\b'+cName+'\\b').test(obj.className);
}
function hasClasses(obj,classes) {
for (f=0; f<classes.length; f++) {
if (!hasClass(obj,classes[i])) return false;
} return true;
}
function addClass(obj,cName) {
if (!hasClass(obj,cName)) {
obj.className+=obj.className?' '+cName:cName;
}
return true;
}
function removeClass(obj,cName) {
if (!hasClass(obj,cName)) return false;
var rep=obj.className.match(' '+cName)?' '+cName:cName;
obj.className=obj.className.replace(rep,'');
return true;
}
function swapClasses(obj,class1,class2) {
if (hasClass(obj,class1)) {
removeClass(obj,class1);
addClass(obj,class2); return true;
}
if (hasClass(obj,class2)) {
removeClass(obj,class2);
addClass(obj,class1); return true;
} return false;
}
function switchClass(obj,to,from) {
if (hasClass(obj,from)) removeClass(obj,from);
addClass(obj,to);
return true;
}
function getElementsByClassName(className,container,tag) {
container = container||document;
tag=tag||'*';
var all = container.all||container.getElementsByTagName(tag);
var found=new Array();
for (f=0; f<all.length; f++) {
var el=all[f];
if (hasClass(all[f],className)) {
found.push(all[f]);
}
}
return found;
}
Zmodyfikowano: 21.05.2007, 21:04