É fácil definir valores CSS embutidos com javascript. Se eu quiser alterar a largura e tiver um html assim:

<div style="width: 10px"></div>

Tudo o que preciso fazer é:

document.getElementById('id').style.width = value;

Alterará os valores da folha de estilo em linha. Normalmente, isso não é um problema, porque o estilo embutido substitui a folha de estilo. Exemplo

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Usando este Javascript:

document.getElementById('tId').style.width = "30%";

Eu recebo o seguinte:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

Este é um problema, porque não só não quero alterar valores inline, se procuro a largura antes de defini-la, quando tenho:

<div id="tId"></div>

O valor retornado é Nulo, por isso, se eu tiver Javascript que precisa saber a largura de algo para fazer alguma lógica (eu aumento a largura em 1%, não para um valor específico), recupero Nulo quando espero a sequência "50 % "realmente não funciona.

Então minha pergunta: eu tenho valores em um estilo CSS que não estão localizados em linha, como posso obter esses valores? Como posso modificar o estilo em vez dos valores embutidos, com um ID?