Adresovßnφ prvk∙ dokumentu

zejmΘna p°φklady

Zm∞na obrßzku - Zm∞na hodnoty polφΦka formulß°e - Vypnutφ stylu

Ukß╛u n∞kolik velmi jednoduch²ch pou╛itφ objekt∙ dokumentu. V╛dy budu chtφt, aby se mi objekt n∞jak zm∞nil po tΘ, co se my╣φ p°ejede sousednφ odkaz, (Φemu╛ v zßpise odpovφdß udßlost onmouseover).

Zm∞na obrßzku

<img border="0" src="prvni.gif" name="jmeno"> <!-- obrßzek, kter² se bude m∞nit -->

<a href="..." onmouseover="document.images['jmeno'].src='druhy.gif'" >p°eje∩</a>

Do strßnky je vlo╛en obrßzek img, kter² mß nastaven² zdroj (src) a jmΘno (name). JmΘno musφ b²t mezi obrßzky v dokumentu jednoznaΦnΘ. Pomocφ toho jmΘna se p°es sbφrku images pak m∙╛e zam∞nit zdroj (src) obrßzku.

Ukßzka: p°eje∩

Na tomto mφst∞ bych m∞l je╣t∞ poznamenat, ╛e jsou mo╛nΘ i jinΘ zßpisy objektu konkrΘtnφho obrßzku (funkΦnφ p°φklad). Bacha na uvozovky, apostrofy a mezery! StaΦφ ale nauΦit se zßpis jeden:

Kdybych cht∞l, aby se mi obrßzek po odjetφ my╣i vrßtil do p∙vodnφho vzhledu, p°idal bych udßlost onmouseout, p°φpadn∞ dal╣φ vychytßvky. Nynφ mi ╣lo jen o to, abych objasnil zp∙sob adresace objektu obrßzku javascriptem.

Zm∞na hodnoty polφΦka formulß°e

Zase budu mφt vedle formulß°ovΘho polφΦka odkaz a budu chtφt, aby se p°i p°ejetφ odkazu do polφΦka <input> zapsala hodnota "ahoj".

<form name="formular"><input type="text" name="policko" size="20" value=""><!-- prßzdnΘ polφΦko, kterΘmu se bude m∞nit value -->

<a href="#" onmouseover="document.formular.policko.value = 'ahoj'">p°eje∩</a></form>

Ve strßnce je formulß° pojmenovan² (name) jako "formular", v n∞m je vstupnφ polφΦko <input>, kterΘ mß name=policko. Potom zßpis document.formular.policko jednoznaΦn∞ identifikuje to polφΦko. Zßpis document.formular.policko.value potom zp°φstup≥uje hodnotu v tomto polφΦku.

Op∞t je mo╛no n∞kolik r∙zn²ch mo╛nostφ zßpisu objekt∙, z nich╛ staΦφ um∞t jeden. Nap°. zßpis

• document.forular.policko
• je ekvivalentnφ se zßpisem document.forms['formular']['policko']
•  nebo s document.formular[0], pokud by to vstupnφ pole bylo ve formulß°i prvnφ,
• nebo document.forms[3][0] pro p°φstup k prvnφmu polφΦku ΦtvrtΘho formulß°e (poΦφtß se to od nuly).

S formulß°i se v Javascriptu dß d∞lat spousta v∞cφ. Dajφ se do nich zapisovat hodnoty, Φφst hodnoty, aktivovat pole, kontrolovat pole p°i odesφlßnφ, znep°φstup≥ovat pole, zji╣╗ovat zatr╛enφ, m∞nit zacφlenφ formulß°e a mo╛nß je╣t∞ n∞co :-)

Vypnutφ stylu

Dal╣φ p°φklad pou╛ije objekt document.styleSheets. Ten obsahuje sbφrku v╣ech prvk∙ <style> a <link rel="stylesheet">. ZejmΘna je umo╛≥uje vypφnat a zapφnat. Zßpis

<style disabled>
body {color: zelen²}
</style>

nezp∙sobφ, ╛e text strßnky nebude zelen², proto╛e tam je to disabled. To zatφm nenφ v∙bec javascript. Ten zapojφm te∩. Budu mφt odkaz a po jeho p°ejetφ styl zapnu:

<a href="#" onmouseover="document.styleSheets[0].disabled = false">p°eje∩ a zapni styl</a>

Objekt document.styleSheet[0] ukazuje na prvnφ styl v dokumentu (poΦφtß se od nuly). Tento styl mß vlastnost disabled, kterß urΦuje, zda je vypnut². Kdy╛ se disabled nastavφ na false, vypnutφ se zru╣φ a styl funguje.

Kdyby bylo t°eba styl op∞t vypnout, dß se disabled = true. Vypφnßnφ a zapφnßnφ styl∙ se zpravidla pou╛φvß s vφce styly -- prost∞ se napφ╣e vφce element∙ <style> nebo <link rel="stylesheet"> a ty se pomocφ disabled nechßvajφ zapφnat a vypφnat. P°φklad zßm∞ny styl∙.

Na tomto mφst∞ jsem ustrnul v psanφ, snad to n∞kdy dopφ╣u. M∙╛ete m∞ povzbudit mailem.