Dinamikus stílusok JavaScripttel 1209

A dokumentum jelölőcímkével ellátott részeinek, tetszőleges megjelenési formát adhatunk JavaScript programunkkal.
Feltétel, hogy az adott területet kijelölő címke, rendelkezzen egyedi id azonosítóval.
Egy adott xhtml oldalon, egy adott id azonosító, csak egyszer szerepelhet, ugyanazon néven.

A lentebb látható egyszerű űrlapon, a <select> elemek segítségével, választhatunk a megjelenő színválasztékból.

<h1 id="cimsor1">h1-es teszt címsor Dinamikus stílusok JavaScripttel.</h1>

<p id="p1">
Ez egy bekezdés, kezdő címkéje rendelkezik egyedi id azonosítóval.
</p>

<p id="p1">
Ez egy újabb bekezdés, kezdő címke id azonosítója, megegyezik az előző bekezdés id azonosítójával.
Mivel mindkét bekezdés azonosítója megegyezik, ezért a másodikra nincs hatással programunk.
</p>

Űrlap, azaz form szakasz megírása XHTML oldalon

<form name="formszinek">
<b>Címsor, betűszín: </b>

<select name="cimsorok" onChange="betuszinh1 () ; " >
<option value="black">Black </option>
<option value="red">Red </option>
<option value="blue">Blue </option>
<option value="green">Green </option>
<option value="yellow">Yellow </option>
<option value="aqua">Aqua </option>
<option value="fuchsia">Fuchsia </option>
<option value="gray">Gray </option>
<option value="lime">Lime </option>
<option value="maroon">Maroon </option>
<option value="navy">Navy </option>
<option value="olive">Olive </option>
<option value="orange">Orange </option>
<option value="purple">Purple </option>
<option value="silver">Silver </option>
<option value="teal">Teal </option>
<option value="white">White </option>
</select>
<br />

<b>Bekezdés, betűszín: </b>

<select name="bekezdesbetu" onChange="betuszinp1 () ; " >
<option value="black">Black </option>
<option value="red">Red </option>
<option value="blue">Blue </option>
<option value="green">Green </option>
<option value="yellow">Yellow </option>
</select>
<br />

<b>Bekezdés, háttérszín: </b>

<select name="bekezdeshatter" onChange="hatterszinp1 () ; " >
<option value="red">Red </option>
<option value="white">White </option>
<option value="blue">Blue </option>
<option value="green">Green </option>
<option value="yellow">Yellow </option>

</select>

</form>

JavaScript programunk megírása külön js fájlban

// stílus meghatározás

function betuszinh1 ( ) {
var i = document.formszinek.cimsorok.selectedIndex;
cimsorszin = document.formszinek.cimsorok.options[i].value;
document.getElementById ("cimsor1").style.color = cimsorszin;
}

function betuszinp1 ( ) {
var i = document.formszinek.bekezdesbetu.selectedIndex;
pbetuszin = document.formszinek.bekezdesbetu.options[i].value;
document.getElementById ("p1").style.color = pbetuszin;
}

function hatterszinp1 ( ) {
var i = document.formszinek.bekezdeshatter.selectedIndex;
phatterszin = document.formszinek.bekezdeshatter.options[i].value;
document.getElementById ("p1").style.background = phatterszin;
}

Megjegyzés:
Form szakaszban figyeljünk oda, hogy a színkód megadásánál a kód és idézőjel között szóköz ne legyen.
Szóköz esetén, EXPLORERBEN nem fog működni a programunk.

Háttérszín választásnál, fehérszín választási lehetőség, ne az első sorban legyen.
Jelenleg elég sok színválasztási lehetőség van. A valóságban elég egy - két szín megadása is, azaz mindenki döntse el, mennyit akar megadni. Teszteljük a fehérszínt (white) háttérszín megadásnál, láthatjuk, hogy rákattintásnál semmi sem történik, még akkor sem, ha a CSS, azaz stíluslapon például szürke háttérszínt állítottunk be.

Vissza a lap elejére