Programming the World Wide Web

Fejezet

6

6.5. A szín illetve betűtípus módosítása

A megjelenített dokumentum hátterének, és előterének színe dinamikusan változtatható, illetve ugyanúgy módosíthatóak a használt betűtípus tulajdonságai.

6.5.1. A színek változtatása

A színek dinamikusan történő változtatása viszonylag egyszerű. A következő példában a felhasználó két szövegmezőn keresztül specifikáhatja a dokumentum hátterének, illetve előterénekszínét. A színek meghatározására a CSS specifikáció által elfogadott háromféle módozat közül bármelyik használható. Valahányszor módosul valamelyik szövegmező tartalma, meghívódik egy JavaScript függvény, mely megváltoztatja a dokumentum megfelelő szín-tulajdonságát: backgroundColor (háttérszín) vagy color (előtér színe). A függvény két paramétere közül az első megszabja, hogy az új szín a háttér vagy az előtér színe lesz-e, míg a második magát az új színt határozza meg. Az új szín a felhasználó által megváltoztatott szövegmező value tulajdonságának az értéke.

Ebben a példában az eseménykezelők hívása a szövegmező XHTML elemekből történik. Ennek a megközelítésnek köszönhetően egyszerű módon lehet az elem DOM-beli címére hivatkozni. A this JavaScript változó ebben az esetben a hivatkozást használó elemnek megfelelő objektumra vonatkozó referencia Egy ilyen objektumra való hivatkozás megfelel a DOM-beli címének. Ezért a text elemben a this értéke a text elem DOM-beli címének felel meg. Ebben a példában tehát a this.value lesz az eseménykezelő függvény aktuális paramétere. Mivel a hívás egy bemenetként szolgáló elemben jelenik meg, a this.value ezen bemeneti elem értékének a DOM címe lesz. A dynColors.html nevű dokumentum és a hozzá tartozó JavaScipt fájl a következőképpen néz ki:

<?xml version="1.0" encoding="utf-8" ?> <!IDOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> <!-- dynColors.html Színek dinamikus valtoztatását mutatja be --> <html xmlns="http://www/w3.org/1999/xhtml"> <head> <title> Dinamikus színek </title> <script type ="text/javascript" src="dynColors.js"> </script> </head> <body> <form> <label> Háttérszín: <input type="text" name="background" size="10" onchange="setColor('background', this.value)"/> </label> <br /> <label> Előtér színe: <input type="text" name="foreground" size="10" onchange="setColor('foreground', this.value)" /> </label> </form> </body> </html> // dynColors.js // Színek dinamikus valtoztatását mutatja be // Eseménykezelő, ami megváltoztatja a háttér illetve előtér színét function setColor(where, newColor) { if(where == "background") { document.body.style.backgroundColor = newColor; } else { document.body.style.color = newColor; } }

A 6.6 ábra a dynColors.html dokumentumot jeleníti meg:

6.5.2. A betűtípus változtatása

A web felhasználói hozzá vannak szokva, hogy a dokumentumokban levő hivatkozások színe megváltozik, amikor a kurzort ezek fölé helyezik. A JavaScript eseménykezelőnek a mouseover esemény hatására történő meghívásával a dokumentum bármely elemének bármely tulajdonsága, beleértve az elem törzsében levő szöveget is, módosítható az egérkurzornak az elem fölé való helyezésekor. Így tehát a betűstílus, betűméret, a szöveg színe valamint háttérszíne is megváltoztatható a kurzornak a szöveg fölé való helyezésekor. A szöveg eredeti stílusjegyeit visszaállíthatjuk a mouseout esemény által kiváltott eseménykezelőben.

Egyetlen szóból álló, kötőjelet nem tartalmazó CSS attribútumnevek esetén a neki megfelelő JavaScript tulajdonság neve ugyanaz, mint az attribútum neve. Ezzel szemben, ha egy attribútumnév kötőjelet is tartalmaz (pl. font-size), a neki megfelelő tulajdonság neve ettől különböző kell legyen (mivel egy tulajdonságnév nem tartalmazhat kötőjelet). Az általános konvenció az, hogy amikor egy attribútumnév kötőjelet tartalmaz, a megfelelő JavaScript tulajdonságot úgy kapjuk, hogy töröljük a kötőjelet, és az utána következő kezdőbetűt nagybetűsítjük. Így pl. a font-size attribútumnévnek megfelelő tulajdonság neve fontSize lesz.

A következő példa p eleme József Attila egy rövid epigrammáját tartalmazza, melynek törzsében kiemeltük a hangsúlyos „ne" szócskát. A kiemelt szó span elembe van ágyazva, ezért a stílusjegyeit meg lehet változtatni. A dokumentum szövegszíne az alapértelmezett fekete, a kiemelt szó pedig kék. Amikor az egér kurzorát a szó fölé helyezik, színe pirosra vált, a betű stílusa dőltté, mérete pedig a 16-os méretről 24-re vált. Mikor a kurzort elvesszük felőle, a szó visszanyeri eredeti formáját. Íme a példát bemutató, dynFont.html nevű dokumentum:

<?xml version = "1.0" encoding = "utf-8" ?> <!IDOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> <!-- dynFont.html Betűtípus változtatása --> <html xmlns = "http:www.w3.org/1999/xhtml"> <head> <title> Dinamikus betűtípus </title> <style type = "text/css"> .regText {font: 16pt 'Times New Roman'} .wordText {color: blue;} </style> </head> <body> <h3>József Attila, Két hexameter</h3> <p class = "regText"> Mért legyek én tisztességes? Kiterítenek úgyis!</br> Mért <span class = "wordText"; onmouseover = "this.style.color = 'red'; this.style.fontStyle = 'italic'; this.style.fontSize = '24pt';" onmouseout = "this.style.color = 'blue'; this.style.fontStyle = 'normal'; this.style.fontSize = '16pt';"> ne </span> legyek tisztességes? Kiterítenek úgyis. </p> </body> </html>

A 6.7 ábra a dynFont.html dokumentumot jeleníti meg:

Megjegyzés: Láthattuk, hogy az eseménykezelők ebben a példában bele vannak ágyazva a jelölőnyelvbe. Ez egyike azon eseteknek, amikor a felhasznált JavaScript kód rövidsége nem indokolja ennek egy külön állományba való helyezését.

Ugrás az oldal tetejére