Visszalépés

JavaScript stílusok

  1. Head
  2. Szövegformázás
  3. Pozíciók, méretek
  4. Táblázatok
  5. Listák
  6. Képek

  7. overflow
  8. visibility
  9. Display
  10. Keret és vonal
  11. Horgony "a"
  12. Cursor
  13. Térhatás
  14. Iframe
  15. Frameset

  16. JavaScript stílusok
  17. jQuery stílusok
  18. Function.
JavaScript stílusok megjelenítéséhez, meg kell határozni, hogy mely elemhez vagy területhez rendeljük e stílusokat.
Az elemeket vagy területeket azonosítani kell, jelölőelem típusával, id egyedi, vagy class osztályazonosítójuk alapján, majd, tetszőleges elnevezésű változóhoz kell rendelni.

JavaScript azonosítási példákat, lásd az oldal alján, vagy kattints ide!


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
Stílus.Rövid leírás.Stílus.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;)
id.style.backgroundAttachment="fixed" 		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";		 leftbaloldal távolsága
id.style.left="80px";
Lásd megjegyzés " 5 "
15
backgroundRepeat		Háttérkép ismétlés nincs.
style.backgroundRepeat="no-repeat"; 		11
letterSpacing		Jel, vagy betűk távolsága.
id.style.letterSpacing="1.5em";
Példaszöveg
5
border
Keret = "vastagság-típus-szín"

id.style.border="2px solid #00f"; 		12
lineHeight		id.style.lineHeight="180%";
Sormagasság, szövegsoroknál.
Sorok közötti távolság.
51
borderBottom
Keret, azaz, vonal lent

style.borderBottom="2px solid blue"; 		listStylelista megjelenése
id.style.listStyle="none";
Lásd megjegyzés "Listáknál"
és baloldalt, a listák témaköröknél.
52
borderBottomColor
keretszín lent, kék.

id.style.borderBottomColor="blue";
Lásd megjegyzés " 2 " 		listStyleImagegrafika stilus
id.style.listStyleImage="url(csillag.jpg)";
53
borderBottomStyle
Keret stílus lent, pontozott.

id.style.borderBottomStyle="dotted";		 listStylePosition listastílus pozició (outside; inside;)

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

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

id.style.borderColor="blue";		 margin külső margó.
Lásd megjegyzés " 6 "
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"; 		overflowtúllógás
id.style.overflow="hidden";
Lásd megjegyzés " 7 "
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"; 		paddingBottomalsó cellabélés
id.style.paddingBottom="10px";
Lásd megjegyzés " 8 "
73
borderRightWidth
Lásd
megjegyzés " 3 "
Keretvastagság jobboldalt, 6px.

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

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

id.style.borderTop="2px solid blue";		 paddingTop
felső cellabélés
id.style.paddingTop="40px";
Lásd megjegyzés " 8 "
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";		 textAlignIgazítás táblázatnál.
id.style.textAlign="right";
id.style.textAlign="center";
clear		törlés: left, right, vagy both,

id.style.clear="left"		 textDecorationszöveg dekoráció.
id.style.textDecoration="none";
Lásd megjegyzés " 12 "
clip		Eredeti 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
id.style.verticalAlign="top";
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.
Csak tábla sorokhoz: collapse;)
id.style.visibility="hidden";
31
fontFamily		Betűcsalád

id.style.fontFamily="Times New Roman";		 width
lásd 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
id.style.zIndex = 1;

 

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, akkor, 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.

  • 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";

 

 

Cursor megjelenések, stílusváltozatai.

A cursor megjelenések stílusát, meghatározhatjuk a dokumentum teljes területére, vagy az általunk kiválasztott jelölőelemhez-jelölőelemekhez is.

A curzor megjelenési formátumához, mozgasd az egeret, a kiválasztott területre.

Elem beazonosítás, és meghatározás:
var id=document.getElementById("id-azonosító");
id.style.cursor="auto";
id.style.cursor="auto"; id.style.cursor="crosshair"; id.style.cursor="default";
id.style.cursor="e-resize"; id.style.cursor="help"; id.style.cursor="move";
id.style.cursor="n-resize"; id.style.cursor="ne-resize"; id.style.cursor="nw-resize";
id.style.cursor="pointer"; id.style.cursor="progress"; id.style.cursor="s-resize";
id.style.cursor="se-resize"; id.style.cursor="sw-resize"; id.style.cursor="text";
id.style.cursor="w-resize"; id.style.cursor="wait";  

 

 

clip
Eredeti képből, általunk kijelölt terület lesz látható.

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

Meghatározások.

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

<script>
var klip=document.getElementById("klipkep"); document.all?  document.all.klipkep: ""
    klip.style.position="absolute";
    klip.style.marginLeft="50px";
    klip.style.clip="rect(0px,50px,50px,0px)";     // Eredeti képből, terület kijelölése.
</scrpt>
</body>
1. clip példa:
Eredeti képből kijelőlt terület.






 Eredeti kép: 140px * 140px méretű.
2. clip példa: 
var klip02=document.getElementById("klipkep02"); document.all? document.all.klipkep02: ""
klip02.style.position="absolute"; 
klip02.style.marginLeft="50px";
klip02.style.clip="rect(40px,100px,100px,40px)";     // Eredeti képből, terület kijelölése.

<img src="foto.jpg" width="140" height="140" id="klipkep02" />







 

 



Példák, jelölőelemek beazonosítására.

Jelölőelemek beazonosítása "nevük" alapján: var p_elemek = document.getElementsByTagName("p");
Program a beolvasott jelölőelemeket, tömb formátumban tárolja, (Tömb első eleme, a [0]-ik).
Mennyi p elemet (darabot) olvasott be a program: pedb=p_elemek.length;
Minden beolvasott p elemnek egyforma stílus meghatározása:
    for (i=0; i< p_elemek.length; i++) 
       {
            p_elemek[i].style.backgroundColor="white";
            p_elemek[i].style.color="red";
            p_elemek[i].style.fontSize="20px";
       }
	   
	   
0-nál nagyobb és 5-nél kisebb index értékkel rendelkező p elemnek, stílus meghatározása:
    for (i=0; i< p_elemek.length; i++) 
       {
         if(i>0 && i<5)
          {
            p_elemek[i].style.backgroundColor="white";
            p_elemek[i].style.color="red";
            p_elemek[i].style.fontSize="20px";
          }
       }

Meghatározzuk beazonosításnál az elem index számát, akkor, csak azt olvassa be a program.
 // Így, a meghatározott jelölőelemek közül, bármelyiket kiválaszthatjuk.
var p01=document.getElementsByTagName('p')[1];
p01.style.color="red";





Az "id" azonosítóval rendelkező elem beazonosítása:
var id=document.getElementById("id-azonosító");
Vagy így:
var id=document.getElementById("id-azonosító"); document.all? document.all.id-azonosító: ""

Változóhoz rendelt elem, id beazonosítását követően, meghatározhatjuk annak stílusát:
Példák: 
id.style.backgroundColor="yellow";           // Háttérszín sárga.
id.style.backgroundImage="url(valami.jpg)";  // Háttérkép meghívása.
id.style.fontStyle="italic";                 // Dőlt betű.
id.style.fontWeight="bold";                  // Vastag betű.
id.style.border="2px solid blue";            // Keretszín kék.
id.style.borderBottomStyle="dotted";         // Keret stílusa lent, pontozott.


A "class" osztályazonosítóval rendelkező jelölőelemek beazonosítása: <p class="bekezdes">.......</p> 
   var x=0; y=0;
   var x_tomb= new Array();   
   var y_tomb= new Array();	 
   paragrafus=document.getElementsByTagName("p");       // Megkeresünk minden p elemet.
   
// 1. Példa: Csak a  class="bekezdes" azonosítóval rendelkező p elemek beazonosítása.
     for (i=0 ; i<paragrafus.length;  i++)  	
       {
          // className nem egyenlő "bekezdes" névvel, akkor ciklus átugrása.
         if (paragrafus[i].className!="bekezdes") {continue;}
         else{y_tomb[y]=paragrafus[i]; y++;}
       }

 
// 2. Példa: Azonosító nélküli és class="bekezdes" azonosítóval rendelkező, "p" elemek szelektálása.
  for (i=0; i<paragrafus.length;  i++)  	
    {
        if (paragrafus[i].className!="bekezdes") {x_tomb[x]=paragrafus[i]; x++;}
        else{y_tomb[y]=paragrafus[i]; y++;}
    }
x_tombhossz = x_tomb.length;    // Az x_tömbben tárolt,  azonosító nélküli <p> elemek száma.
y_tombhossz = y_tomb.length;    // Az y_tömbben tárolt, <p class="bekezdes"> elemek száma.

// Az y-tömb tárolja a <p class="bekezdes">  elemeket, elemek index értéke 0-val kezdődik.
// Mostantól egyenként is, vagy csoportosan is, meghatározhatjuk stílusukat.

Példa:
li elemek beazonosítására, és
azok stílus meghatározásaira:

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:
id azonosítóval rendelkező elem beazonosítása,
és stílusának meghatározása:

var idelem=document.getElementById("id_azonosító");
idelem.style.backgroundColor="yellow";
idelem.style.color="blue";
idelem.style.border="1px solid #000";
idelem.style.fontSize="20px";
idelem.style.padding="5px";

 

 

Vissza a lap elejére

További stílusok választhatók, a baloldali témakörökből!