JavaScript stílusok

Következő stílus táblázat, már az MS Internet Explorer 4.0 által is ismert, tulajdonságokat sorolja fel
Tesztelve: IE6; IE7; IE8; Mozilla Firefox; böngésző programokban
JavaScript
megadás		Rövid leírás JavaScript
megadás		Rövid leírás
1
background		Háttérkép
id.style.background="url(hatterkep.jpg)"; 		33
fontStyle		Betűstílus ( italic )
id.style.fontStyle="italic";
backgroundAttachment
Lásd megjegyzés " 15 "		 Háttérkép vízjel (fixed; scroll;) 34
fontVariant		Karakter változat
id.style.fontVariant="small-caps";
12
backgroundColor		háttérszin
style.backgroundColor="yellow"; 		35
fontWeight		 karakter vastagság ( bold; normal; )
id.style.fontWeight="bold";
13
backgroundImage		Háttérkép
style.backgroundImage="url(hatterkep.jpg)";		 height elem terület magassága
id.style.height="80px";
14
backgroundPosition		háttérkép poziciója
id.style.backgroundPosition="right";		 left
Lásd megjegyzés " 5 "		baloldal távolsága
id.style.left="80px";
15
backgroundRepeat		háttérkép ismétlés
style.backgroundRepeat="no-repeat"; 		11
letterSpacing		jel, vagy betűk távolsága
Példaszöveg
5
border
Keret = "vastagság-típus-szín"

id.style.border="2px solid #00f"; 		12
lineHeight		sormagasság, szövegsorok
közötti távolság.
51
borderBottom
keret lent

style.borderBottom="2px solid blue"; 		listStyle
Megjegyzés "Listáknál" 		lista megjelenése
id.style.listStyle="none";
52
borderBottomColor
Lásd megjegyzés " 2 "
keretszín lent, kék.

id.style.borderBottomColor="blue";		 listStyleImagegrafika stilus
id.style.listStyleImage="url(csillag.jpg)";
53
borderBottomStyle
Keret stílus lent, pontozott.

id.style.borderBottomStyle="dotted";		 listStylePosition
Lásd megjegyzés " 14 " 		listastílus pozició (outside; inside;)

id.style.listStyle="inside";
54
borderBottomWidth
Lásd megjegyzés " 3 "
Keretvastagság lent, 6px.

id.style.borderBottomWidth="6px";		 listStyleType
Megjegyzés "Listáknál" 		lista típusa
id.style.listStyleType="upper-roman";
55
borderColor
Lásd megjegyzés "4"
Keret színe, kék.

id.style.borderColor="blue";		 margin
Lásd megjegyzés " 6 " 		külső margó
6
borderLeft
Keret baloldalt

id.style.borderLeft="blue"; 		marginBottomalsó margó

id.style.marginBottom="80px";
61
borderLeftColor
Lásd megjegyzés " 2 "
Keretszín baloldalt, kék.

id.style.borderLeftColor="blue";		 marginLeftbal margó
id.style.marginLeft="80px";
62
borderLeftStyle
Keret stílusa baloldalt, pontozott

id.style.borderLeftStyle="dotted";		 marginRightjobb margó
id.style.marginRight="80px";
63
borderLeftWidth
Lásd megjegyzés " 3 "
Keretvastagság baloldalt, 6px.

id.style.borderLeftWidth="6px";		 marginTopfelső margó
id.style.marginTop="80px";
7
borderRight
Keret jobboldalt

id.style.borderRight="blue"; 		overflow
Lásd megjegyzés " 7 "		túllógás
id.style.overflow="hidden";
71
borderRightColor
Lásd megjegyzés " 2 "
Keretszín jobboldalt, kék.

id.style.borderRightColor="blue";		 paddingBelső margó, cellabélés
id.style.padding="10px";
72
borderRightStyle
Keret stílusa jobboldalt, pontozott.

id.style.borderRightStyle="dotted"; 		paddingBottom
Lásd megjegyzés " 8 "		alsó cellabélés
id.style.paddingBottom="10px";
73
borderRightWidth
Lásd megjegyzés " 3 "
Keretvastagság jobboldalt, 6px.

id.style.borderRightWidth="6px";		 paddingLeft
Lásd megjegyzés " 9 " 		bal cellabélés
id.style.paddingLeft="10px";
8
borderStyle
Keretstílus, pontozott.

id.style.borderStyle="dotted"; 		paddingRight
Lásd megjegyzés " 9 "		jobb cellabélés
id.style.paddingRight="40px";
9
borderTop
keret fent

id.style.borderTop="2px solid blue";		 paddingTop
Lásd megjegyzés " 8 "		felső cellabélés
id.style.paddingTop="40px";
91
borderTopColor
Lásd megjegyzés " 2 "
keretszin fent

id.style.borderTopColor="blue";		 pageBreakAfterutána lapdobás
id..style.pageBreakAfter="always"
92
borderTopStyle
Keretstílus fent, pontozott.

id.style.borderTopStyle="dotted";		 pageBreakBeforeelőtte lapdobás
id.style.pageBreakBefore="always"
93
borderTopWidth
Lásd megjegyzés " 3 "
keretvastagság fent

id.style.borderTopWidth="6px";		 positionpozició (absolute, relative, stb;)
id.style.position="absolute";
10
borderWidth
Lásd megjegyzés " 3 "
Keretvastagság 6px.

id.style.borderWidth="6px";		 alignigazítás
id.style.textAlign="right";
id.style.textAlign="center";
cleartörlés

id.style.clear="left"		 textDecoration
Lásd megjegyzés " 12 "		szöveg dekoráció
clipEredeti képből, kijelőlt terület megadás

id.style.clip="rect(0px,50px,50px,0px)"; 		textIndentElső szövegsor behúzása
id.style.textIndent="30px";
2
color		szövegszín

id.style.fontColor="blue";		 textTransformszöveg átalakítás (uppercase, lowercase, capitalize)
id.style.textTransform="uppercase";
14
cursor		Egér kurzor: progress; crosshair; help;
Továbbiakat lásd lent: Cursor megjelenések, stílusváltozatainál.

id.style.cursor="progress";		 top
Lásd megjegyzés " 5 " 		pozicionálás fentről
id.style.top="80px";
display
Lásd megjegyzés " 10 " 		láthatóság ( block vagy none )
id.style.display="none"; 		verticalAlign Függőleges igazítás
Lásd megjegyzés "Táblázatnál"
3
font		 Betűméret, betűcsalád

id.style.font="25px, Times New Roman"; 		visibility
Lásd megjegyzés " 11 " 		láthatóság (visible vagy hidden)
id.style.visibility="hidden";
31
fontFamily		Betűcsalád

id.style.fontFamily="Times New Roman";		 width
Megjegyzés " listaknal "		Elem, objektum, szélessége

id.style.width="80px";
32
fontSize		Betűk-mérete

id.style.fontSize="20px"; 		zIndexrétegpozició takaráskor

 

Megjegyzés. Csak akkor használható, ha:
  • 2. CSS fájlban meghatároztuk a keretet, vagy az aktuális oldalát, és színt is rendeltünk hozzá. Megváltoztatja a CSS fájlban meghatározott színt.
  • 3. CSS fájlban meghatároztuk a keret, vagy az aktuális oldalvastagságot. Megváltoztatja a CSS fájlban meghatározott vastagsági értéket.
  • 4. CSS fájlban meghatároztuk a keret színét, azaz, megváltoztatja a CSS fájlban meghatározott keret színt.
  • 5. CSS vagy js fájlban, meghatároztuk a position fajtáját. (absolute, relative, stb;)
  • 6. Külső margóval mozgatandó objektum, div szakaszban helyezkedik el, és ennek széleitől távolodik.
  • 7. A kijelölt (width, height) területen kívülre eső szövegrészek, nem jelennek meg.
  • 8. Az alsó és felső, belső margó, megváltoztatja az előzetesen meghatározott elem, területi magasságát.
  • 9. A jobbos és balos, belső margó, megváltoztatja az előzetesen meghatározott elem, területi szélességét.
  • 10. none: Kijelölt részt, eltünteti helyfoglalás nélkül, azaz úgy, mintha ezen részt, be sem írtuk volna weboldalunkra. A block: láthatóvá teszi.
  • 11. hidden: Kijelölt részt, eltünteti helyfoglalással, azaz láthatatlanná teszi. Weboldalon az előzőleg kijelölt terület megmarad, azaz a szövegfolyamban egy üres terület lesz látható. A visible: láthatóvá teszi.
    14-es téma
  • 12. textDecoration:
    • none: Dekoráció nincs (Gyakran alkalmazzuk hivatkozásoknál)
    • overline: Egyenes vonal a szöveg felett!
    • line-through: Vízszintesen, egyenes vonallal, áthúzza a szöveget!
    • underline: Egyenes vonal a szöveg alatt!
    • blink: Szöveg villogás! IE-6 IE-7 IE-8 semmi, MA megjeleníti
  • 14. A böngésző programok listastílus alapbeállítása outside; Egyébként, akkor van hatással, ha előzőleg meghatároztuk az inside stílust, és ezek közül valamelyik listasort, ki akarjuk emelni a többi közül.
    • Ha, a listasor szövege egy sornál hosszabb, és az első sort, balra kijjebb akarjuk húzni a többitől, akkor: style.textIndent="-30px";
  • 15. background-attachment:fixed;
    • <style type="text/css">
      body{
      background-image:url('vizjel.gif');
      background-repeat:no-repeat; background-position:center;
      background-attachment:fixed;
      }
      </style>
    • var id=document.getElementById("container"); document.all? document.all.container: ""
      id.style.backgroundImage="url(vizjel.gif)";
      id.style.backgroundRepeat="no-repeat";
      id.style.backgroundPosition="center";
      id.style.backgroundAttachment="fixed";
Táblázatnál:
  1. A th és td cellában, szöveg függőlegesen fentre: id.style.verticalAlign="top";
  2. A th és td cellában, szöveg függőlegesen középre: id.style.verticalAlign="center";
  3. A th és td cellában, szöveg függőlegesen lentre: id.style.verticalAlign="bottom";
  4. A th és td cellában, szöveg vízszintesen balra: id.style.textAlign="left";
  5. A th és td cellában, szöveg vízszintesen középre: id.style.textAlign="center";
  6. A th és td cellában, szöveg vízszintesen balra: id.style.textAlign="right";
Listáknál:
  1. ul vagy ol típusú listáknak, szélességi (width) érték meghatározásakor, eltűnnek a sorokat jelölő elemek, sorszámok
  2. Minkét meghatározásnál, listStyle vagy listStyleType ugyan azon meghatározások beírhatók.
    listStyle="none"; vagy listStyleType="none";

 

var Jelölőelemek = document.getElementsByTagName("p"); var Egyedi_azonosító=document.getElementById("h2cimsor1");
Példa:
var Listak = document.getElementsByTagName("li");
for ( var i=0; i<Listak.length; i++) {
Listak[i].style.backgroundColor="yellow";
Listak[i].style.color="blue";
Listak[i].style.border="2px solid #000";
Listak[i].style.size="20px";
}
 Példa:
idelem.style.backgroundColor="yellow";
idelem.style.color="blue";
idelem.style.border="1px solid #000";
idelem.style.fontSize="20px";
idelem.style.padding="5px";

 

 

Cursor megjelenések, stílusváltozatai.

<style type="text/css">
body{cursor:auto;}
</style> 		body{cursor:crosshair;} body{cursor:default;}
body{cursor:e-resize;} body{cursor:help;} body{cursor:move;}
body{cursor:n-resize;} body{cursor:ne-resize;} body{cursor:nw-resize;}
body{cursor:pointer;} body{cursor:progress;} body{cursor:s-resize;}
body{cursor:se-resize;} body{cursor:sw-resize;} body{cursor:text;}
body{cursor:w-resize;} body{cursor:wait;}  

 

 

A clip (Ez egy kép)

IE-6, IE-7, CSS-ből nem ismeri, de JavaScriptből igen. IE-8 és Mozilla Firefox, felismeri.
Első érték : top
Második érték: right
Harmadik érték: bottom
Negyedik érték: left

A meghatározott értékekkel, az eredeti képből (fotóból), melyik terület legyen látható, tetszőleges területet tudunk kijelölni.

A stílust meghatározhatjuk:
- Közvetlen az "img" jelölőelemnek, ekkor minden weboldali képre hatással van.
- A kép egyedi azonosítójához, ekkor csak az adott képre lesz hatással.

CSS stílus meghatározás, img jelölőelemnél vagy az egyedi azonosítónál.

  1. img {position:absolute; margin-left: 50px; clip:rect(0px,50px,50px,0px);}
  2. #klipkep {position:absolute; margin-left: 50px; clip:rect(0px,50px,50px,0px);}

JavaScript stílus meghatározás

Eredeti kép
<body>
<img src="foto.jpg" width="140" height="140" id="klipkep" />
</body>

Eredeti képből kijelőlt terület.

 Eredeti kép, 140 x 140px méretű.

 

 

 

 

 

 

 

Vissza a lap elejére