změna css vlastnosti

Zdravím,

chtěl bych se zeptat, jestli existuje jednoduchý způsob jak změnit při události onclick CSS vlasnost. Konkrétně tady:

<style>

.pozadi-white {
	background-color: white;
}
.pozadi-black {
	background-color: black;
}
</style>  
</head>

<body>

<?php
session_start();

function zobraz_policko($druh_policka, $id){

  if ($druh_policka == "white"){?><td width="50px" height="50px" class="pozadi-white"></td> <?php ;}                                
  if ($druh_policka == "black"){?><td width="50px" height="50px" class="pozadi-black"></td> <?php ;}
              
                                           }

potřeboval bych do funkce "zobraz_policko" do vykreslení buňky přidat událost "onclick" tak, aby se přehodil styl.
Idea je nějak takto:

<td width="50px" height="50px" class="pozadi-white" OnClick="this.pozadi-black">

Prosím nebijte mě, učím se :)

Předmět	Autor	Datum
Ten atribút onclick by vyzeral takto: onclick="this.className='pozadi-black'" resp. ak to chceš pr… nový los 04.05.2014 16:37	los	04.05.2014 16:37
Děkuji moc, to je přesně ono! Vysvětlení je naprosto jasný, hodně jsi mi pomohl ;) mějte se... poslední hurrey 04.05.2014 16:59	hurrey	04.05.2014 16:59

Předmět

Autor

Datum

Ten atribút onclick by vyzeral takto: onclick="this.className='pozadi-black'" resp. ak to chceš pr… nový

los 04.05.2014 16:37

los

04.05.2014 16:37

Děkuji moc, to je přesně ono! Vysvětlení je naprosto jasný, hodně jsi mi pomohl ;) mějte se... poslední

hurrey 04.05.2014 16:59

hurrey

04.05.2014 16:59

Ten atribút onclick by vyzeral takto:

onclick="this.className='pozadi-black'"

resp. ak to chceš prehadzovať:

onclick="this.className=this.className=='pozadi-white'?'pozadi-black':'pozadi-white'"

Ok, toľko k otázke, teraz k tomu, ako sa to robí lepšie: Ideálne je, keď je javascriptový kód oddelený od HTML podobne, ako je CSS kód oddelený od HTML. Čiže v elemente td by si sa mal zbaviť nielen atribútov width a height, ale aj onclick.

Javascriptový kód zavesíš na elementy jednoducho tak, že v script elemente (ktorý je v zdrojovom HTML kóde umiestnený za elementom, na ktorý sa chceš zavesiť - aby bol ten element už dostupný), pridáš obsluhu nejako takto:

...
<td id="moja-bunka" class="pozadi-white">
...
<script>
document.getElementById('moja-bunka').onclick = function() {
  this.className = this.className == 'pozadi-white' ? 'pozadi-black' : 'pozadi-white';
};
</script>

Keďže predpokladám, že chceš rovnako reagovať na klik na viacerých bunkách, tak najlepšie bude zavesiť sa na tabuľku, ktorá ich obsahuje:

<table id="moja-tabulka">
  ...
</table>
<script>
var table = document.getElementById('moja-tabulka');
table.onclick = function(e) {
  for (var el = e.target; el && el != table; el = el.parentNode)
    if (el.tagName == 'TD' && el.className.indexOf('pozadi') != -1) {
      el.className = el.className == 'pozadi-white' ? 'pozadi-black' : 'pozadi-white';
      break;
    }
}
</script>

Týmto spôsobom sa vyhneš zbytočnému pridávaniu obsluhy udalostí na N buniek, takže to bude rýchlejšie. Tento spôsob sa nazýva "event delegation".

Ďalšia vec je, že pred volaním session_start by si nemal posielať nič na výstup do tela HTTP odpovede, pretože v rámci toho volania môže byť potrebné poslať nejaké HTTP hlavičky.

Děkuji moc, to je přesně ono! Vysvětlení je naprosto jasný, hodně jsi mi pomohl ;) mějte se...