DHTML

DHTML działa również w trybie application/xhtml+xml, bo to nic innego jak wymyślna nazwa na manipulację DOMCSS przez skrypt.

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 używamy konstrukcji:

 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 margin będzie dawała pożądane rezultaty.

Potem już cała sztuka sprowadza się do zmiany właściwości margin:

 element.style.margin = b + 'px ' + r + 'px ' + t + 'px ' + l + '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ą offsetWidthoffsetHeight (podana zawsze w pixelach). Można zmieniać wielkość ustalając style.widthstyle.heightstyle.lineHeight (w elementach inline) (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:active, uwalniając kod JavaScript od obsługi zdarzeń onmouseover/onmouseout, onmousedown/onmouseup.

 function hasClass(obj,cName) { 
        return obj.className.indexOf(cName) !== -1;
 }

 function hasClasses(obj,classes) { 
 var result;
        for (var f in classes) { 
                result = hasClass(obj,classes[i]);
        }  
    return result;
 } 

 function addClass(obj,cName) { 
        obj.className += !hasClass(cName) ? ' '+cName : '';
 } 

 function removeClass(obj,cName) { 
       obj.className = hasClass(obj,cName) ? obj.className.replace(' '+cName,'') : obj.className; 
 } 

 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; 
 } 

Zmodyfikowano: 24.03.2014, 02:23
submit