Weblap Hová jutunk?

Jelölőcímkék keresése, stílus módosítása 1806

Terület, mező, vagy elágazások jelölőelemének megkeresése

Megkeresésük, js parancsfájl getElementsByTagName("...") függvény segítségével történik

<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.getElementsByTagName("....") 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>

A Bekezdesek nevet viselő változó helyett, tetszőleges nevet írhatunk.
Mivel ez a program jelenleg a p címkékkel határolt területekre vonatkozik, ezért én, a Bekezdesek változó elnevezést írtam be.

Script program megírása:

<script language="JavaScript" type="text/javascript">
var Bekezdesek = document.getElementsByTagName("p");
for ( var i =0; i< Bekezdesek.length; i++) {
Bekezdesek[i].style.backgroundColor="yellow";
Bekezdesek[i].style.color="blue";
Bekezdesek[i].style.border="2px solid black";
}
</script>

A getElementsByTagName("p"); kijellölőben,
a p mint bekezdés címke helyett, tetszőleges a HTML dokumentumban alkalmazható jelölőcímkét beírhatunk.
Példa címkék neve, melyet a p helyére beírhatunk:
Címsort kijelölő címkék (h1, h2, h3, h4, h5, h6,)
Adott területet kijelölő címkék: div, span, pre, strong, em, table, tr, th, td, ul, ol, li, form, input, textarea, stb.
Képek címkéjénél (img), csak abban az esetben hatásos, ha a kép valamilyen okból nem jelenik meg.
Összegezve:
Minden jelölőelem neve beírható a példánkban szereplő p, azaz bekezdést azonosító címkenév helyett.
Ezek gyűjteménye megtalálható, a kezdő weboldalon (kattints a Németjuhász kutya fotójára)

<div> Kezdő div jelölöelem

<h2> --------- címsor ---------- szövege ----- </h2>

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

<p>Új bekezdés<span> Szöveg kiemelése</span> xxxxxxx xxxx </p>

<p>Új bekezdés<strong> Vastag betűk</strong> xxxxxxx xxxx </p>

<p>Új bekezdés <em> Dőlt betűk </em> xxxxx xxxxxx </p>

<cite> x xxx xxxxxxxxx xxxxxxxxx xx xxxxxxxxx</cite> 
<pre> x      xxx            xx xx x xxx            x xx </pre>
<dfn>Új bekezdés xxxxxx xxxxxxxxx </dfn>

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

</div> Záró div jelölőelem

<h3> -----------címsor-------------- szövege ------ </h3>

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

<h5> ---------- címsor -------------- szövege ------ </h5>

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

<h6> ul, ol, li jelölőcímkék<h6>
    <ol>
  1. <li>Listasor számozott<li>
  2. <li>Új listasor<li>
  3. <li>Új listasor</li>
    4. </ol>

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

<h5>Táblázatoknál </h5>

<table width="350" class="tabla35">
<caption>Bemutató táblázat</caption>
<tr>
<th><input type="text" name="szoveg" size="20" value="input szövegablak"> </th>
</tr>
<tr>
<td><input type="button" value="input kapcsoló gomb"> </td>
</tr>
</table>

Bemutató táblázat

<h4> A form jelölőelem </h4>

<form>
<input type="text" ................. >
<input type="text" ................. >
<input type="text" ................. >
</form>
<h5> Képeknél alkalmatott img jelölőelem </5>
<img src="kép elérési utvonala.jpg" width=800; height="150" / >


<img src="Hibás elérési utvonala.jpg" width=800; height="150" / >
Bemutató végett, nincs kép. Hibás elérési útvonal van megadva! Képek img címkéjénél, JavaScript programunk csak abban az esetben hatásos, ha a kép valamilyen okból nem jelenik meg.

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

<h4> A textarea jelölőelem <h4>

<h5> ---------- címsor ------------- szövege -----<h5>

<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>

Belső JavaScript program megírása

Ezen programunkat a dokumentumunk végén írjuk meg, hogy minden jelölőelemet figyelembe vegyen.
Elhelyezhetjük a dokumentumunk szövegfolyamában is tetszőleges helyen, de ebben az esetben, a JavaScript program előtti jelölőelemeket megkeresi, de a program után lévő jelölőelemeket nem veszi figyelembe.

A következő JavaScript programunk eredményét láthatjuk ezen weboldalon.
Programunk a listás felsorolásokra van hatással, melyet fentebb láthatunk.
A listás felsorolások: sárga háttérszínben, kék betűkkel, 2px solid fekete keretben és 20px-es betűméretben jelennek meg.

<script language="JavaScript" type="text/javascript">

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

</script>

 

 

Vissza a lap elejére