Zjištění CSS hodnot v JavaScriptu

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Skrývání a odkrývání

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

Komentáře