Jak změnit pomocí this css style v JS

Štýly prvku sa dajú meniť pomocou vlastnosti style. Typicky, ak názov CSS vlastnosti pozostáva z viacerých slov oddelených pomlčkou, tak ich treba spojiť a zapísať ako camelCase, aby ste sa dostali k názvu vlastnosti v JavaScripte. To znamená, že napr. background-color nastavíte pomocou this.style.backgroundColor = 'red'.

Väčšinou sa to ale robí tak, že sa zmení trieda prvku pomocou vlastnosti className alebo classList tak, aby bol výzor definovaný v CSS, kde patrí. Občas má ale aj nastavenie pomocou JavaScriptu svoje výhody.

Díky moc, tohle mi pomohlo.

this.style.backgroundColor = 'red'

Neuvědomila jsem si ale to, že se stránka v JS po každém kliknutí nenačítá znova. Existuje prosím i nějaká funkce která by dokázala v celém seznamu vymazat css style u všech <a> v daném div-u?

<div class="menu_con">
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</div>

Něco jsem našla ale nefunguje to

$('.menu_con ul li *').style.backgroundColor = "none";

Knižnica jQuery má na to vlastnú funkciu css, tam by to vyzeralo asi takto (možných spôsobov zápisu je viac):

$('.menu_con ul li a').css('background-color', 'transparent');

Edit: V čistom JavaScripte by to bolo niečo takéto:

var elements = document.querySelectorAll('.menu_con ul li a');
for (var i = 0, n = elements.length; i < n; ++i) {
  var element = elements[i];
  element.style.backgroundColor = 'transparent';
}

V tomto prípade by možno bolo lepšie nastaviť triedu nadradenému elementu ul a v CSS definovať príslušné pravidlá.

Raději bych tohle krátké a přehledné řešení, ale nic to neudělá

$('.menu_con ul li a').css('background-color', 'transparent');

ani žádná chyba Nějaký nápad?

Zkoušela jsem i v čistém JS ale taky to nic neudělá..

Príklad s jQuery by mal fungovať. Prvým krokom bude asi skontrolovať, či sa na stránke dané elementy vôbec nachádzajú - t.j. spustiť ladiaci nástroj (väčšinou cez F12) a pozrieť, čo vráti napr. document.querySelectorAll('.menu_con ul li a').

Edit: Nastavenie farby na transparentnú samozrejme nebude vidno, ak predtým mali tie prvky tiež transparentnú farbu.

Já jsem kráva, zase místo mřížky (id) tečka (class).
Děkuji mockrát za pomoc.

EDIT:
@moose
můžu změnit i ten styl u <a> podle odkazu?
jak jsi mi tady radil

this.style.backgroundColor='#D1CDCC';

tak bych potřebovala tohle aplikovat po prvním načtení stránky na jednu položku <a> u které je href="nejakylink", jde to jednoduše udělat?
Moc děkuji!

ne - to neni mozny udelat

Ideálne je, keď pridáš triedu ešte na strane serveru, keď sa stránka generuje. Ak je to ale statická stránka a nemáš možnosť upraviť to na serveri, tak v tom prípade musíš získať daný element a potom mu môžeš nastaviť farbu.

Získať element môžeš viacerými spôsobmi. Jedným z nich môže byť jednoduché prebehnutie všetkých odkazov v tom zozname v slučke a porovnávanie jeho hash hodnoty s tým, čo hľadáš. Ďalšou možnosťou môže byť napr. toto:

var link = document.querySelector('.menu_con ul li a[href="#hash"]');

Následne už len nastavíš farbu pomocou link.style.backgroundColor = '#d1cdcc'.

Super objasnění. Moc děkuji.