Javascript udostępnia nam właściwość element.style, która zawiera w sobie informacje o stylowaniu dla danego elementu. Może ona zwracać dane wartości styli, lub je ustawiać.
Przykładowe zastosowanie tej właściwości możecie zobaczyć poniżej:
function zmienStylowanie() {
var div = document.getElementById('niesformatowanyDIV');
with (div.style) {
backgroundColor='#33CCCC';
borderColor = '#336699';
borderWidth = '1px';
borderStyle = 'solid';
fontFamily = 'Tahoma, Arial';
lineHeight = '100px';
fontSize = '13px';
color = '#CCFFFF';
width = '100px';
height = '100px';
textAlign = 'center';
}
div.innerHTML = 'zostałem sformatowany przez JS'
}
Zauważ, że podając wartość w liczbach podawałem też jednostki. W XHTML Strict jest to wymagane.
Czyżbyśmy musieli uczyć się na nowo wszystkich nazw formatowania? Niekoniecznie. Znając ich odpowiedniki w CSS, łatwo możemy je tworzyć w Javascripcie. Patrząc na powyższy przykład z łatwością możemy dostrzec, że większość nazw jest bardzo podobna do CSS, i tak:
Znak "-" zostaje usunięty z nazwy, a słowo znajdujące się tuż po nim zostaje zapisane z Dużej litery.
Znając powyższą zasadę bez problemu poradzicie sobie w zmienianiu reszty styli.
Czemu występują takie różnice? To logiczne. W końcu w Javascripcie znak "-" nie mógł być stosowany w nazwach, bo jest operatorem, za pomocą którego tworzy się równania.
Istnieje też o wiele sprawniejsza metoda zmiany stylowania dla elementu. Wystarczy zmienić mu jego klasę poprzez właściwość className. Przypisywana klasa musi być wcześniej zadeklarowana w stylach strony:
<style >
div.sformatowany {
background:#33CCCC;
border:1px solid #369;
font:13px Tahoma,Arial;
color:#CFF;
width:200px;
height:100px;
text-align:center;
}
</style>
Teraz wystarczy tylko zmienić klasę naszego elementu:
var div = document.getElementById('niesformatowanyDIV');
div.className = 'sformatowany';
Usuwanie klasy to też prosta sprawa - wystarczy przypisać tej właściwości pusty ciąg znaków.
Właściwość ta jest często wykorzystywana przy pobieraniu wybranych elementów z kolekcji obiektów. Wpierw pobieramy wszystkie lementy danego typu ze strony (getElementsByTagName), a potem wykonując pętlę, sprawdzamy który z nich ma odpowiednią klasę:
var elementy = document.getElementsByTagName('div');
for (x=0; x<elementy.length; x++) {
elementy[x].className == 'zaznaczone') {...}
}
Poniżej znajdują się wszystkie style (CS2), które możesz formatować za pomocą Javscript.
azimuth, background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, bottom, captionSide, clear, content, counterIncrement, counterReset, cssFloat, cssText, cue, cueAfter, cueBefore, cursor, direction, display, elevation, emptyCells, font, fontFamily, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontVariant, fontWeight, height, length, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, markerOffset, marks, maxHeight, maxWidth, minHeight, minWidth, orphans, outline, outlineColor, outlineStyle, outlineWidth, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, page, pageBreakAfter, pageBreakBefore, pageBreakInside, parentRule, pause, pauseAfter, pauseBefore, pitch, pitchRange, playDuring, position, quotes, richness, right, size, speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress, tableLayout, textAlign, textDecoration, textIndent, textShadow, textTransform, top, unicodeBidi, verticalAlign, visibility, voiceFamily, volume, whiteSpace, widows, width, wordSpacing, zIndex,