É fácil definir valores CSS embutidos com javascript. Se eu quiser mudar a largura e tiver um html assim:
<div style="width: 10px"></div>Tudo que eu preciso fazer é:
document.getElementById('id').style.width = value;Isso mudará os valores da folha de estilo embutida. 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 obtenho o seguinte:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>Isso é um problema, porque não só não quero alterar os valores embutidos, Se eu olhar para a largura antes de defini-la, quando tenho:
<div id="tId"></div>O valor retornado é Nulo, então se eu tenho 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), voltando Nulo quando espero a string "50% "realmente não funciona.
Portanto, minha pergunta: eu tenho valores em um estilo CSS que não estão localizados inline, como posso obter esses valores? Como posso modificar o estilo em vez dos valores embutidos, dado um id?