Autor Zpráva
LukasP
Profil *
Ahoj, nejprve bych chtel rici, ze s JS nemam moc zkusenosti, prohledaval jsem forum, ale nenasel jsem uspokojujici odpoved. Muj problem je nasledujici: potrebuji zmenit barvu pozadi prvku, ktere maji stejnou class, resil jsem to nasledujicim zpusobem, ktery je nejspis spatny, protoze nefunguje :) -

<td class="exp01"
onMouseOver="document.getElementsByClassName(exp01).style.background='gray';"
onMouseOut="document.getElementsByClassName(exp01).style.background='red';">
.. v tabulce je vicero bunek se stejnou tridou
v CSS souboru mam pak definovane defaultni zobrazeni
.exp01 {background: green;}

Omlouvam se pokud jsem presne nesplnil vsechna pravidla, jak spravne vlozit prispevek a dekuji predem za pomoc.
Str4wberry
Profil
První problém je, že název třídy, dle které se hledá, není v uvozovkách a tato funkce vrací kolekci elementů. Pokud to opravíte (getElementsByClassName('exp01')[0]), nejspíš narazíte na nefunkčnost ve starších Explorerech, protože metodu getElementsByClassName neumějí, namátkou:
Nefunkčí skript v IE 7 - getElementsByClassName
document.getElementsByClassName nefunguje v IE

Nicméně celému problému, zdá se, by se v tomto případě dalo vyhnout použitím this.
<td class="exp01" onMouseOver="this.style.background='gray';" onMouseOut="this.style.background='red';">
LukasP
Profil *
Velice dekuji za odpoved. Ovsem, kdyz jsem si po sobe precetl svuj prispevek, zjistil jsem ze jsem se spatne vyjadril. Po najeti mysi na urcity element, v mem pripade bunka, potrebuji zmenit pozadi ne jen te bunky, na kterou jsem mysi najel, ale i dalsich bunek, nahodne umistenych v tabulce, samozrejme se stejnou tridou jako ma bunka, na ktere se nachazi kurzor.
Str4wberry
Profil
Tak potom:
1) je možnost si doplnit getElementsByClassName pro starší prohlížeče,
2) měnit třídu společného rodiče a zbytek nechat na CSS.

Druhá možnost by fungovala tak, že při najetí do buňky nastavíte tutéž třídu rodiči (tedy například <table>) a v CSS bude table.exp01 .exo01 {background: red}. (Pro přehlednost můžete třídě pro společného rodiče přidat ještě nějaké pojmenování.)

Název třídy získáte z vášElement.className.
LukasP
Profil *
Rad bych vyuzil fuknci getElementsByClassName, stranka kde bude tato fuknce vyuzita bude zobrazovana jen na aktualnich verzich prohlizecu, takze zpetnou kompatibilitu resit nemusim. Akorat si ted nevim rady, jak zvolit celou kolekci elementu? Pokud doplnim, jak jste uvadel [0], zvolim tak pozuze jeden element s poradim v zavorce.
Chamurappi
Profil
Reaguji na LukaseP:
bude zobrazovana jen na aktualnich verzich prohlizecu
Aktuální pro počítače s Windows XP je i Explorer 8 a tam metoda getElementsByClassName nefunguje, musel bys použít querySelectorAll.

Akorat si ted nevim rady, jak zvolit celou kolekci elementu?
Musel bys ji projet cyklem. Proč se bráníš měnění třídy na společném rodiči? Jednorázová změna s využitím kaskádovosti je efektivnější než babrat se s celou kolekcí a nastavovat jí prezentační atribut.
LukasP
Profil *
Delam na strance jen pro par lidi, takze vim kdo ji bude navstevovat a co pouzivaji za prohlizec. Druhe moznosti se nebranim, ale jak jsem zminil v prvnim prispevku, jsem uplny zacatecnik a s druhou moznosti si uz vubec nevim rady, proto jsem zvolil tu prvni. :)
Str4wberry
Profil
Druhou možnost jsem myslel nějak takto.
LukasP
Profil *
Dekuji moc, urcite to pouziju, presne takto jsem to myslel. :) Jenom pro zajimavost, netrvam na tom, jsem si zkusil udelat funkci pro zvoleni vsech elementu, ale taktez mi nefunguje. Mohl bych jeste poprosit o vyjadreni, co jsem udelal spatne?

function changebg(className, Color)
{
var elements=document.getElementsByClassName(className);
for(var i=0, length=elements.length; i<length; i++){elements[i].style.background='Color';}
}
a v html potom takto onMouseOver="changebg('exp01', 'gray');" onMouseOut="changebg('exp01', 'red');"
Str4wberry
Profil
Zdejší zbarvení kódu nenapovědělo? :–) Jako barvu nastavujete řetězec „Color“, místo proměnné Color.
LukasP
Profil *
No jo uz to vidim, sem slepej. Dekuji, uz jde i moje moznost. Ale pouziju tu od Vas. :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0