Despre stilurile elementelor

Ce este stilul unui obiect?

Este un obiect DHTML care memoreaza toate setarile referitoare la stilul unui element dat.

Sintaxa

object.style[ = style]

Caror obiecte se aplica?

Tuturor obiectelor DHTML.

Cum se modifica stilul unui element HTML?

1. Mai intai se atribuie un identificator unic  id pentru element prin
   <TAG_NAME id="identificator" ...> sau un nume unic name prin
   <TAG_NAME name="nume" ...>
Nota: Nu toate obiectele DHTML au definite atributele NAME si ID. Spre exemplu SCRIPT nu are atributul NAME, are insa atributul ID.
2. Se modifica dupa dorinta stilul obiectului printr-o instructiune de genul
   document.all.tag_id.style.stil=stil_nou sau prescurtat
3. tag_id.style.stil=stil_nou 
   unde stil poate fi oricare dintre proprietatile obiectului style listate aici.

In formularul urmator puteti modifica dinamic cateva stiluri ale acestei pagini (elementul 7 este BODY, 8 este titlul acestei pagini, 9 primul subtitlu etc.);

incercati:

Text care isi va schimba stilul

Se mai poate incerca:

Proprietati ale obiectului style

background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundPositionX, backgroundPositionY, backgroundRepeat, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, clip, color, cssText, cursor, display, filter, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, height, left, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, pageBreakAfter, pageBreakBefore, pixelHeight, pixelLeft, pixelTop, pixelWidth, posHeight, position, posLeft, posTop, posWidth, styleFloat, textAlign, textDecoration, textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline, textIndent, textTransform, top, verticalAlign, visibility, width, zIndex 

Functiile folosite in cele doua formulare sunt si ele redate dinamic folosind scriptul

<script>document.write(scr1.text)</script>

 ceea ce genereaza urmatorul text

Apelurile acestor functii se face in evenimentul onClick al butoanelor cu numele B1 si B10 cuprinse in formularele F1 si F10, definind atributele

onclick="newstyle(T1.value, T2.value, T3.value)"
onclick="newstyle(T10.value, T20.value, T30.value)"

pentru butoanele B1 si respectiv B10.

Putem vedea cum sunt implementate aceste handlere apeland indirect functia toString pentru proprietatea onclick a butoanelor B1 si B10 prin scriptul

<script>
document.write(F1.B1.onclick,"<br>",F10.B10.onclick,"<br>")
</script>

care genereaza

Cateva detalii referitor la stiluri

Stilul cursor

Stilul cursor poate lua una dintre valorile: auto, crosshair, default, move, hand, help, text, wait, *-resize (unde * poate fi e, w, n, s, ne, nw, se, sw).

Atributul CSS corespunzator este  si are sintaxa:

{ cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help}

Stilul  fontSize

Stilul  fontSize poate lua valorile: absolute (xx-small, x-small, small, medium, large, x-large, xx-large), relative (larger, smaller), numeric absolute (de ex 8, 12, 72) sau numeric in procente (de ex. 50%, 150%), relativ la marimea fontului parintelui.

Atributul CSS corespunsator este font-size  si are sintaxa

{font-size: mar_absoluta | mar_relativa | numar_abs | numar_procent}

Stilul  color

poate lua urmatoarele valori:

Culorile stilului color  pot fi specificate in doua moduri:

1. Folosind un nume de culoare sau
2. folosind numere hexazecimale precedate de # in sintaxa 
   #RRGGBB
   unde RR sunt cifrele hexazecimale pentru rosu, GG pentru verde si BB pentru albastru

Atributul CSS este color si are sintaxa:

{ color: culoare}

Stilul backgroundColor

Stilul backgroundColor poate lua valoarea transparent sau o culoare precizata (la fel ca pentru stilul color).

Atributul CSS asociat este background-color si are sintaxa

{ background-color: culoare | transparent}

Stilul borderStyle

Stilul borderStyle poate lua una dintre valorile:

none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Atributul CSS asociat este border-style si are sintaxa:

{ border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset}

Stilul textTransform

Stilul textTransform poate lua una dintre urmatoarele valori in afara de none:

Atributul CSS corespunzator este text-transform, care are sintaxa

{text-transform: capitalize | uppercase | lowercase | none}

Stilul visibility

Stilul visibility poate lua doua valori: hidden si visible.

Atributul CSS corespunzator este visibility si are sintaxa

{ visibility: visible | hidden | inherit}

Stilul position

Stilul position poate lua valorile: absolute, relative sau static.

Atributul CSS corespunzator este position si are sintaxa:

{ position: absolute | relative | static}

Stilul top

Stilul top poate lua valori: numerice in pixeli (de ex. 200), numeric in procente (50%) sau auto.

Atributul CSS corespunzator este top si are sintaxa:

{ top: numar_pixeli | numar_procent | auto }

Stilul left

Stilul left poate lua valori: numerice in pixeli (de ex. 200), numeric in procente (50%) sau auto.

Atributul CSS corespunzator este left si are sintaxa:

{ left: numar_pixeli | numar_procent | auto }

Stilul marginTop

Stilul marginTop poate lua valori: numerice in pixeli (de ex. 200), numeric in procente (50%) sau auto.

Stilul CSS asociat este margin-top si are sintaxa:

{ margin-top: [ numar_pixeli | numar_procent | auto]}

Stilul marginLeft

Stilul marginLeft poate lua valori: numerice in pixeli (de ex. 200), numeric in procente (50%) sau auto.

Stilul CSS asociat este margin-left si are sintaxa:

{ margin-left: [ numar_pixeli | numar_procent | auto]}

Stilul marginBottom

Stilul marginBottom poate lua valori: numerice in pixeli (de ex. 200), numeric in procente (50%) sau auto.

Stilul CSS asociat este margin-bottom si are sintaxa:

{ margin-bottom: [ numar_pixeli | numar_procent | auto]}

Stilul marginRight

Stilul marginRight poate lua valori: numerice in pixeli (de ex. 200), numeric in procente (50%) sau auto.

Stilul CSS asociat este margin-right si are sintaxa:

{ margin-right: [ numar_pixeli | numar_procent | auto]}

© Cornel Mironel Niculae, 2003-2007

26-Jun-2007