Az id azonosítóval rendelkező címkék megkeresése. 1808
Jelölőelem keresése getElementById("...") függvénnyel
Ha egy elemet ellátunk egyedi id azonosítóval, akkor a getElementById("...") függvénnyel megkereshetjük.
A zárójelek közé írjuk be, az elemnek adott, id egyedi azonosító nevet.
<h2> Program ismertetése </h2>
JavaScript programunkat HTML oldalon, a <body> szakaszban, azaz a szövegfolyamban helyezzük el.
Csak azon jelölőcímkékre lesz hatással programunk, melyek a script program előtt helyezkednek el.
Ha azt akarjuk, hogy HTML oldalunkon a várt jelölőcímkék mindegyikét figyelembe vegye document.getElementsById("....") függvény, akkor helyezzük a dokumentumunk aljára script programunkat.
Ugyan így kell eljárni akkor is, ha JavaScript programunk külön js fájlban van megírva, és onnan hívjuk meg a következő mehatározással:
<script language="JavaScript" type="text/javascript" src="elérési útvonal.js"> </script>
Írjunk be egy tetszőleges váltózó nevet, (A példában szereplő idelem változó név, az id azonosítóval ellátott elem rövidítése)
A getElementById("h2cimsor1") függvényben látható h2cimsor1 helyett, azon azonosítót írjuk be, melyet megakarunk keresni a html oldalon.
Script program megírása:
<script language="JavaScript" type="text/javascript">
var idelem=document.getElementById("h2cimsor1");
idelem.style.backgroundColor="yellow";
idelem.style.color="blue";
idelem.style.border="1px solid #000";
idelem.style.fontSize="20px";
idelem.style.padding="5px";
</script>
A dokumentum további része, úgy lett elkészítve, hogy:
- Kijelölhető másolásra, azaz bárki átmásolhatja a saját html oldalára, és rögtön tesztelheti a program működését.
- Minden jelölőelem kezdő címkéje, egyedi id azonosítóval rendelkezik. Melyet, mindenki tetszésének megfelelően átírhat, más elnevezésre.
- Teszteléshez, a kiválasztott jelölőelem id azonosítóját kell, a JavaScript programba beírni
<h2 id="h2cimsor1"> címsor szövege </h2>
<p id="p1">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<p id="p2">Új bekezdés<span id="span1"> Szöveg kiemelése</span> xxxxxxx xxxx </p>
<p id="p3">Új bekezdés<strong id="strog1"> Vastag betűk</strong> xxxxxxx xxxx </p>
<p id="p4">Új bekezdés <em id="em1"> Dőlt betűk </em> xxxxx xxxxxx </p>
<cite id="cite1"> x xxx xxxx xxxxx xx </cite><pre id="pre1"> x xxx xx x </pre>
<dfn id="dfn1">Új bekezdés xxxxxx xxxxxxxxx </dfn>
<p id="p5">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
</div> Záró div jelölőelem<h3 id="h3cimsor1"> címsor szövege </h3>
<p id="p6">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h5 id="h5cimsor1"> ---------- címsor -------------- szövege ------ </h5>
<p id="p7">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h6 id="h6cimsor1"> ul, ol, li jelölőcímkék<h6>
- <ul id="ul1808">
- <li id="li181"> Listasor szám nélküli </li>
- <li id="li182">Új listasor</li>
- <li id="li183">Új listasor<li> </ul>
- <ol id="ol1808">
- <li id="li184">Listasor számozott<li>
- <li id="li185">Új listasor<li>
- <li id="li186">Új listasor</li> </ol>
<p id="p8">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h5 id="h5cimsor2">Táblázatoknál </h5>
<table width="350" class="tabla35" id="tabla1808">
<caption>Bemutató táblázat</caption>
<tr>
<th><input type="text" name="szoveg1808" id="szoveg1808" size="20" value="input szövegablak"> </th>
</tr>
<tr>
<td><input type="button" id="button1808" value="input kapcsoló gomb"> </td>
</tr>
</table>
<h4 id="h4cimsor1"> A form jelölőelem </h4>
<h5 id="h5cimsor3"> Képeknél alkalmatott img jelölőelem </5>
<img src="kép elérési utvonala.jpg" width=800; height="150" class="kep181" id="kep181" / >
<img src="Hibás elérési utvonala.jpg" width=800; height="150" class="kep181" id="kep182" / >
<p id="p9">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h4 id="h4cimsor2"> A textarea jelölőelem <h4>
<textarea cols="70" rows="4" id="textarea1808"> ... </textarea>
<h5 id="h5cimsor4"> ---------- címsor ------------- szövege -----<h5>
<p id="p10">Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h2 id="h2cimsor2"> -- címsor szövege ----- </h2>
<p> <strong> JavaSript programunk megírása </strong> </p>
<p>A style, azaz stílus meghatározásokat, mindenki tetszésének megfelelően írja át </p>
<script language="JavaScript" type="text/javascript">
var idelem=document.getElementById("h2cimsor1");
document.all? document.all.h2cimsor1: " "
idelem.style.backgroundColor="yellow";
idelem.style.color="blue";
idelem.style.border="1px solid #000";
idelem.style.fontSize="20px";
idelem.style.padding="5px";
</script>
Ha a programunk a kereset id jelölőelem előtt helyezkedik el, ez lehet a head szakasz is, hibához vezet. Hibajelzés: Az objektumot kötelező megadni!
A következő meghatározásoknál, nagybetűvel írjuk: Size, Color, Top, Right, Bottom, Left !
Helyesen írva:
- backgroundColor
- fontSize
- marginTop
- marginRight
- marginBottom
- marginLeft
- paddingTop
- paddingRight
- paddingBottom
- paddingLeft
- borderTop
- borderRight
- borderBottom
- borderLeft