`getComputedStyle` în JavaScript

Returnează stilurile finale ale unui element, după aplicarea tuturor regulilor CSS.

Sintaxă

const stil = getComputedStyle(element, pseudoElement);
stil.getPropertyValue("font-size")

Ce face `getComputedStyle`

element.style arată doar stilurile scrise direct pe element. getComputedStyle arată valorile finale, calculate din toate fișierele CSS, clasele și moștenirea, în unități absolute (de exemplu "16px", "rgb(10, 125, 59)").

Rezultatul este doar pentru citire și se actualizează singur. Al doilea parametru citește stilul unui pseudo-element, ca "::before". Variabilele CSS se citesc cu getPropertyValue("--nume").

Parametri

Parametru	Descriere
`element`	Elementul inspectat.
`pseudoElement`	Opțional. De exemplu `"::after"`.

Ce returnează

Un obiect CSSStyleDeclaration doar pentru citire.

Exemple

Exemplul 1: Stilul real al unui buton

<style>
  :root { --culoare: #0a7d3b; }
  .btn { padding: 0.5rem 1rem; background: var(--culoare); }
</style>
<button class="btn">Trimite</button>

<script>
  const stil = getComputedStyle(document.querySelector(".btn"));
  console.log(stil.paddingTop, stil.backgroundColor, stil.display);
  console.log(getComputedStyle(document.documentElement).getPropertyValue("--culoare"));
  console.log(document.querySelector(".btn").style.backgroundColor === "");
</script>

Rezultat în browser

8px rgb(10, 125, 59) inline-block
#0a7d3b
true

Greșeli frecvente

Citești element.style.width ca să afli lățimea și primești "". Folosește getComputedStyle sau getBoundingClientRect.

Comenzi înrudite

style.setProperty / getPropertyValue: Setează, citește și șterge stilurile CSS scrise direct pe element, inclusiv variabilele CSS (–culoare).
getBoundingClientRect / elementFromPoint: Returnează poziția și mărimea unui element pe ecran; elementFromPoint face invers, din coordonate în element.
Element.checkVisibility: Verifică dacă un element este afișat (nu are display: none, nici el, nici părinții).

Ce face getComputedStyle