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.

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

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 i style.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.

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

 function hasClass(obj,cName) { 
        return obj.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; 
 } 

 function getElementsByClass(className) { 
        var container = document.getElementsByTagName('*');
        var found = [];
        for (var x in container) {if (hasClass(container[x], className)) found[found.length] = container[x];}
        return found;
 }

• Spis treści
• Kroki
• Strona Główna
• Ilustracje
• Historia zmian
• Edytuj