Pegar valores do CSS com JavaScript

1a atrás

A função window.getComputedStyle() dá a possibilidade de computar valores do CSS de certo elemento.

Por exemplo, conforme o HTML abaixo:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
  #example {
      background-color: blue;
      border-radius: 50%;
        height: 100px;
        margin: 2em;
        width: 100px;
    }
</style>
</head>
<body>
  <div id="example"></div>
</body>
</html>

Para retornar os estilos computados da div com id "example", pode-se usar o código abaixo no #JavaScript:

const styles = window.getComputedStyle(document.getElementById('example'));

E agora, é possível retornar cada propriedade do CSS com a função getPropertyValue():

styles.getPropertyValue('border-radius'); // 50%
styles.getPropertyValue('margin-top'); // 32px
styles.getPropertyValue('background-color'); // rgb(0, 0, 255)

Comentários (0)