Objektum keresés JavaScrip fájlból
document.getElementById()
Adatok lekéréséhez tudni kell, HTML oldalunkon hól található, a várt adat, azaz melyik objektumban helyezkedik el.
Adatot bármelyik objektumból lekérhetünk, ha az adott elem rendelkezik id egyedi azonosítóval. Például: id="alma"
Adat lekéréshez, a document.getElementById() tagfüggvényt alkalmazzuk
Kapott értéket, azaz adatot, változóhoz rendeljük. Továbbiakban, ez a változó fogja tárolni a lekért adatot.
Változónak, szabadon választott egyedi nevet adhatunk, például: objektum, vagy dokument, stb.)
Példa: (Megjegyzés: Az objektum név helyett, tetszőleges egyedi elnevezést írhatunk.)
var objektum = document.getElementById ("alma")
A megtévesztés elkerülése végett:
getElementById utolsó két betűje, az id nagybetűvel kezdődő változata, azaz Id
Megjegyzés:
Régi böngészők még nem támogatták a document.getElementById() tagfüggvényt,
ezért ott el sem indul programunk.
De bízzunk benne, hogy manapság, egyre újabb böngésző típusokat alkalmaznak a felhasználók.
Rétegek között elhelyezkedő elemek
A weblapok minden elemét vezérelhetjük, minden elemet tetszőleges pozícióba helyezhetünk.
A HTML objektumok csoportjai rétegeket alkotnak, ezeket külön egységként kezelünk.
Egyedi rétegeket is létrehozhatunk a <div> és a <span> elemekkel.
De önmagukban a html oldalon, semmi formázási hatásuk sincs, a bennük elhelyezkedő szövegrészre.
A span egy tetszőleges részt jelöl ki a html dokumentumban.
A div is hasonlóan jár el, de ez egy sortörést helyez el a tartalmi része előtt és után.
Ahhoz, hogy ezen rétegelemekben megjelenő szövegrész megjelenési formájára hatással legyünk, megtehetjük CSS, azaz stílus fájlban vagy JavaSripttel.
Ennek feltétele, hogy azonosítót rendeljünk hozzájuk.
CSS, azaz stílusfájl, elfogadja az id egyedi azonosítót vagy class osztályazonosítót, de a JavaScript az id egyedi azonosítót veszi figyelembe.
Lentebb, ezen oldalon is láthatunk egy példát.
De, ha erre a sorra kattintunk, újabb példát is láthatunk
Bemutató példa:
Táblázatban látható a JavaScript programunk.
A valóságban, azaz élesben:
- A JavaSript programot, külön js. fájlban helyezzük el, nem az adott táblázatban.
- A táblázatra jellemző stílusokat, CSS, azaz stíluslapon írjuk meg.
|
<table id="szinpelda" width="700px;" border="2px;" bordercolor="green;"> <tr><td> <script language="JavaScript" type="text/javascript"> var sebesseg=1200 function valtoszinek() { var keretszin=document.getElementById ? document.getElementById("szinpelda") : document.all ? document.all.szinpelda : "" if ( keretszin ) { if ( keretszin. style.borderColor.indexOf("blue")!=-1) keretszin. style.borderColor="yellow" else keretszin. style.borderColor="blue" } } setInterval("valtoszinek()", sebesseg) </script> </td></tr> </table> |