Weblap Hová jutunk?

Dinamikus stílusok.12

Dinamikus stílusok meghatározásához, be kell tudnunk azonosítani, a dokumentumunk területeit.

  1. Beazonosítás alapismerete.

  2. HTML TagName jelölőelemek beazonosítása,

  3. HTML id azonosítóval rendelkező jelölőelemek beazonosítása.

  4. HTML ClassName azonosítóval rendelkező jelölőelemek beazonosítása.

  5. Dinamikus stílusok. A dokumentum jelölőcímkével ellátott részeinek,

  6. Összefoglaló tesztelhető bemutatóval.
    HTML object, TagName, id, ClassName, jelolőelemek beazonosításához.






Néhény példa.

Dokumentum, azaz, weboldal összes <p> jelölőelem lekérdezése.
Lekérdezettek tömb formátumban, a "dok_p" nevű változóba kerülnek.

                <span id="docP"></span>
<script>
var dok_p = document.getElementsByTagName("p");
var dok_ph=dok_p.length;                 // Dokumentumban talált, "p" elemek száma.
        id = document.getElementById("docP");
        id.innerHTML = 'P elemk száma, a dokumentumban = '+dok_ph;
                dok_p[0].innerHTML = 'Te vagy az első, p-tag.';
                dok_p[1].innerHTML = 'Te vagy a második, p-tag.'; 
</script>

Kiválasztott "id" azonosítóval rendelkező div elem területén lévő, összes <p> jelölőelem lekérdezése.
Lekérdezettek tömb formátumban, a "div_p" nevű változóba kerülnek.

                 <span id="divP"></span>
<script>
var div_p = document.getElementById("id_azonosító").getElementsByTagName('p');
var div_ph=div_p.length;             // Kiválasztott területen talált, "p" elemek száma.
        id = document.getElementById("divP");
        id.innerHTML = 'P elemk száma, a kiválasztott div elem területén = '+div_ph;
              div_p[0].innerHTML = 'Te vagy az első, p-tag.';
</script>
         

Dokumentum, azaz, weboldal összes olyan jelölőelem lekérdezése, melynek azonosítója class="pclass".
Lekérdezettek tömb formátumban, a "klassz" nevű változóba kerülnek.

                   <span id="klassz"></span>
<script>
var klassz = document.getElementsByClassName("pclass");
var klasszh=klassz.length;             // Talált class="pclass" azonosítású elemek száma.
        id = document.getElementById("klassz");
        id.innerHTML = 'Talált class="pclass" azonosítású elemek száma = '+klasszh;
              klassz[0].innerHTML = 'Te vagy az első, mely class="pclass" azonosítással rendelkezik.';
</script>	

Kiválasztott "id" azonosítóval rendelkező div elem területén lévők, melynek azonosítója class="pclass".
Lekérdezettek tömb formátumban, a "dklassz" nevű változóba kerülnek.

                   <span id="divben_pclass"></span>
<script>
var dklassz = document.getElementById("id_azonositó").getElementsByClassName("pclass");
var dklasszh=dklassz.length;             //Div-ben talált class="pclass" azonosítású elemek száma.
        id = document.getElementById("divben_pclass");
        id.innerHTML = 'Div-ben class="pclass" azonosítású elemek száma = '+dklasszh;
              dklassz[0].innerHTML = 'Div-ben az első, mely class="pclass" azonosítással rendelkezik.';
</script>