Desempacotando valores de propriedades CSS em JavaScript
Ao ler o atributo style, as propriedades
CSS abreviadas são expandidas em suas
propriedades completas. Vamos ver
o que isso significa. Suponha que tenhamos
definido uma margem para todos os lados:
elem.style.margin = '20px';
Vamos exibi-la:
console.log(elem.style.margin); // exibirá '20px';
Ao mesmo tempo, a leitura de propriedades para lados individuais também estará disponível:
console.log(elem.style.marginLeft); // exibirá '20px';
Dado um div:
<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
text
</div>
Também é dado um botão. Ao clicar no botão exiba a espessura da borda, seu tipo e a cor.
