Starší komentáře ke článku: Změna barvy pozadí v buňce tabulky či části stránky
Zpět na článek | Úvodní stránka Interval.cz
Datum vložení: 3.9.2001 2:08:32
No takze ta linka s ukazkou akosi nefunguje ...
Datum vložení: 3.9.2001 9:08:29
...prozmenu ;-)
Datum vložení: 4.9.2001 14:14:28
skuska
Datum vložení: 3.9.2001 12:14:00
Zdravim,
pokusim sa doplnit a vysvetlit niektore otazky, ktore boli nacrtnute autorom v clanku. Hlavne vysvetlit preco autorom napisana funkcia <B>changeColor</B> funguje iba pre IE a NN4, a ako urobit(+ vysvetlenie) aby fungovala aj pre NN6, Mozillu a Operu.
Naprv trosku malo teorie. Tento efekt(menenie farby, a inych vlastnosti, v podstate lubovolneho elementu /objektu/, nielen tabulky) vyuziva nie len JavaScript, ale hlavne tzv. <B>Document Object Model</B>, skratene DOM a tiez kaskadove styly CSS.
DOM je standard W3C, ktory, zjednodusene povedane, funguje takto: Ked prehiadac nacita stranku vytvori si hierarchicku reprezentaciu obsahu stranky, resp. celej stranky. Tato struktura sa sklada z uzlov (objektov), ktore su usporiadane do stromu (stromova struktura) a kazdy z uzlov reprezentuje nejaky element, atribut elementu, alebo samotny obsah, HTML stranky. DOM bol (je) vytvoreny pre jazyk XML, avsak ako vsetci viete HTML je jednou z jeho podmnozin, cize plati aj pre HTML. Samotny JavaScript, alebo iny skriptovaci jazyk je iba "prostrednik" na pristup k jednotlivym uzlom (objektom) stromovej struktury dokumentu.
DOM ponuka v zasade dva druhy metod (ak chcete funkcii). Po prve su to metody na pristup (t.j. ich pridavanie, modifikovanie a mazanie) k danym uzlom a po druhe metody na "prechadzanie sa" po stromovej strukure, teda po jednotlivych uzloch.
Samozrejme, ze DOM sa vyvyjal. Od verzie DOM 0(DOM level 0), cez DOM 1 po sucasnu verziu DOM 2 a pripravovanu DOM3.
DOM 0 - tuto verziu podporuju prehliadace (NN a IE) do verzie 4, teda 3-kove verzie.
DOM 1 - verzie 4 a viac prehliadacov
DOM 2 - tuto verziu DOM-u podporuju 5-kove a viac verzie prehliadacov NN6+, IE, OPERA, Mozilla avsak nie uplne, ale zaklad dvojky funguje uspokojivo
Ako uz iste tusite, tak problemy budu s implementaciou jednotlivych standardov verzii DOM-u jednotlivych prehliadacov a ich verziami. Aby som to skratil.
V dnesnej dobe verzie IE5+ a NN6+ najlepsie zo vsetkych prehliadacov podporuju standard DOM2(a starsie), povedal by som, ze NN6 je najdalej v jeho podpore. Celkom dobre su na tom Opera 5 a Mozilla 0.9.x. Preto nie je dnes tazke urobit skript (aj ten z dnesneho prikaldu) tak, aby fungoval minimalne v tychto verziach prehliadacov(IE5+, NN6, Opera5 a Mozilla 0.9.x) s jednym kodom.
Ako je to so starsimi verziami?
Je tu jeden problem, avsak urcite znamy - vlastne (propietarne) riesenia daneho problemu u kazdeho prehliadaca. Hlavne sa to tyka NN 4 a IE(vseobecne). Takymi to vlastnostami (hlavne pri NN 4) boli napr. bgColor, document.Layers, pri IE zase document.all a vseobecne pre IE aj NN4 document.Image a dalsie.
V sucasnosti verzie IE5+ podporuju aj tieto stare propietarne riesenia, kdezto napr. NN6+ ich nepodporuje. Tak isto Opera5 a Mozilla podporuju iba nove standardy (aj ked s chybami a nie uplne). Preto dany skript v dnesnom clanku funguje iba na IE a NN4, lebo vyuziva "stare" riesenia, resp. pri NN4 to nie je chyba(tam to inak nejde), ale pre IE a ostatne prehliadace sa to da riesit inak a lepsie (aspon podla mojho nazoru).
Este jedna dolezita poznamka. S tym, ze autor (v prikalde)pouziva tzv. propietarne riesenia, tak sa vyhol pouzitiu Kaskadovych stylov CSS. CSS je velmi dolezita zlozka pri HTML, a tiez aj pri DOM-e, lebo umoznuje prehladne a jednoducho nastavit pre kazdy element stranky (tabulku, obrazok, text, bunku tabulky, odstavec, odkaz ....) vlastnosti ako su farba textu, podkladu textu, pisma- rezy, velkosti, zarovnanie, umiestnenie, .... A ked je takto definovany element, resp. jeho vlastnosti, je potom velmi jednoduche pri nejakej udalosti (pohyb, poloha nad elementom, kliknutie mysi a ine), ktoru (udalost) je mozne zachytit pomocou JavaScriptu, zmenit (vlastnost elementu) pomocou DOM-u. Vyhoda CSS je aj v tom, ze aspon zaklad CSS pozna aj NN4.
Takze ako upravit dnesny skript - resp. funkciu changeColor tak aby fungovala pre NN4 a aj ostatne prehliadace? Staci nahradit propietarnu metodu document.all - metodou getDocumentById(nazovID). A tiez by som som v definici tabulky definoval pomocou CSS farbu podkladu background-color.
V praxi asi takto:
toto:
var n = document.all[name]
n.style.background = color
by som nahradil tymto:
var n = document.getElementById(name);
n.style.backgroundColor = color;
alebo jednoducho:
document.getElementById(name).style.backgroundColor = color;
resp. aby to bolo kompletne:
function changeColor(name,color)
{
//pre NN4
if(document.layers)
{
var n = eval("document."+name)
n.bgColor = color
}
//pre ostatne prehliadace
else
{
var n = document.getElementById(name);
n.style.backgroundColor = color;
}
}
Tag table by mohol vyzerat takto:
<table bgColor="cyan" <B>style="background-color: cyan;"</B> border="2" cellpadding="0" cellspacing="0">
Este mala poznamka. Prehliadac Opera5 obsahuje pri implementacii CSS a DOM-u vela chyb. Jednou z nich je aj to, ze pri pouziti vsetkcyh vlastnosti CSS background (background-color, background-image, ...) ich ignoruje.
Je jasne, ze taketo pouzitie vyzaduje nastudovanie si kaskadovych stylov CSS1 a CSS2, a DOM-u, ale myslim si, ze dnes sa uz bez toho clovek, tvoriaci weby nezaobide.
Este uvadzam dve ukazky podobnych veci a mozete si pozriet ako je to urobene: <a href='http://www.interval.cz/podklady/gregorovic/tab_IE_NN6.html' target='_blank'>http://www.interval.cz/podklady/gregorovic/tab_IE_NN6.html</a> a <a href='http://www.interval.cz/podklady/gregorovic/obr.html' target='_blank'>http://www.interval.cz/podklady/gregorovic/obr.html</a>
V priapde vaseho zaujmu je mozne napisat o tom clanok na Interval.
Datum vložení: 3.9.2001 13:01:29
Nemohu nereagovat byt pouze kvuli jedne vetice. A totiz autor se zminuje, ze tag <SPAN> lze pouzit treba i pro celou tabulku. V tom se bohuzel myli. SPAN je urcen pro inline elements, coz znamena, ze patri do stejne kategorie jako tagy I, B atd. Pokud chceme takhle zabalit celou tabulku, musime bouzit tag <DIV>, ktery je block-level.
A jeste jedna otazka. Proc se element ID nepouzije u bunky tabulky? Nemelo by to nahodou stejny vysledek?
Datum vložení: 4.9.2001 13:43:23
Zdravim,
s tym SPAN mate pravdu. Kto neveri, nech si to
vyskusa napr. na formularoch. Bez DIV ho napr. do
stredu stranky nedostane.
No, z pricipu parameter ID je mozne dat do
kazdeho tagu. Cize v uvedenom pripade by mohol
byt kludne v tagu bunky tabulky (TD), co by bolo
aj jednoduchsie z hladiska pisania kodu :).
Datum vložení: 4.9.2001 13:15:51
Kde je mozne sehnat popis vlastnosti a metod objektu STYLE?
Datum vložení: 4.9.2001 14:03:25
Hmm, objekt - Vy myslite v JavaScripte, co je pouzite
nieco.style.nieco = hodnota.
Ak ano, tak to je potom jednoduche. Staci si
nastudovat kaskadove styly (CSS - napr. aj tu na
Intervale).
No a tieto styly maju urcite vlastnosti, ktore sa
priraduju k jednotlivym elementom (tabulka,
bunka, obrazok, odstavec...)
No a potom pomocou JavaScriptu a DOM-u je mozne
pristupovat k jednotlivym vlastnostiam elementu a
menit ich hodnoty:
document.metoda_na_pristup.style.nazov_vlastnosti
= hodnota
Datum vložení: 4.9.2001 15:18:55
To jsem si myslel taky, treba jen u toho prikladu je vlastnost pro pozadi v CSS background-color, jenze pres objektove volani je to bgcolor.
Kazdy prohlizec to ma zase jinak.
Neverim tomu, ze vsechny vlastnosti CSS jsou menitelne pomoci JavaScriptu. Teda aspon z me zkusenosti pokusu.
Datum vložení: 5.9.2001 11:34:35
No, nemate pravdu. Poviem to priamo - s
JavaScriptom to nesuvisi. Ide totizto o Document
Object Model, skratene DOM.
Pre pochopenie si prosim precitajte moj prispevok
tu v diskusii s nazvom "doplnenie informacii z
clanku". Po precitani by Vam malo byt jasne,
preco bgcolor a backgroundColor.
Ak nie ozvite sa!
s pozdravom
Datum vložení: 28.9.2001 2:14:37
<a href='http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp' target='_blank'>http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp</a>
Pokud chces podporu v NN tak styly nepouzivej, pokud ti staci Mozilla tak se drz tech u kterejch je napsany ze sou podle standardu (maj to tam velice dobre oznaceny).
Pokd z nejayho duvodu chces primo style objekt tak <a href='http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_style.asp' target='_blank'>http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_style.asp</a> (budou te zajimat veci co sou pod Style).
Datum vložení: 19.7.2008 16:47:51
Chtěl bych se zeptat jak by šel napsat script pro tenhle příkald: 1.stránka: Tlačítko nakterém je napsáno "offline" 2.stránka: Červený čtverec Chtěl bych aby když klinknu na prvni stránce na "offline" aby se na tlačítku napsalo "onlinne" a na druhé stránce by se červený čtverec proměnil v zelený čtverec a potom zase naopak