Moderní tvorba webových aplikací

O webu

Zjištění výsledného CSS v JavaScriptu

Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.

2 minuty

V některých případech je potřeba v JS spočítat výsledné hodnoty CSS vlastností nějakého elementu. To se může hodit třeba při tvorbě universálního JS + CSS řešení, kdy nelze spoléhat na výchozí CSS, ale zase je nemůžeme natvrdo přenastavit.

Zatímco pro nastavování CSS vlastností z JavaScriptu stačí jen z názvů CSS vlastností vhodit spojovník a následující písmeno zvětšit:

element.style.cssVlastnost = "její hodnota";
element.style.backgroundColor = "red";

Nebo veškeré CSS zapsat do cssTextu.

element.style.cssText = "
  css-vlastnost: 'její hodnota'; 
  background-color: 'red'
";

Při čtení stylu skriptem je to komplikovanější.

<style>
  div {color: red}
<style>
<div></div>
<script>
  alert(
    document.getElementsByTagName("div")[0].style.color
  );
</script>

Tento kód nevyhodí v alertu hodnotu red, jak by se mohlo očekávat. Ukázka.

Řešení

Co tedy s tím? Existují vlastnosti getComputedStyle a do IE 8 currentStyle. Ve starších IE je ještě drobná odlišnost v tom, že potřebuje název CSS vlastnosti v camelCase a ne se-spojovníkem.

Funkce sjednocující prohlížeče může vypadat následovně:

function getStyle(oElm){
    return window.getComputedStyle ? getComputedStyle(oElm, "") : oElm.currentStyle;
}

Použití

var div = document.getElementsByTagName("div")[0];
var sktuecnyRamecek = getStyle(div).border;

Živá ukázka

Související články

Vložení CSS do stránky

Jakými všemi způsoby připojit CSS do stránky.

9 minut

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025