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:

javascriptelem.style.margin = '20px';

Vamos exibi-la:

javascriptconsole.log(elem.style.margin); // exibirá '20px';

Ao mesmo tempo, a leitura de propriedades para lados individuais também estará disponível:

javascriptconsole.log(elem.style.marginLeft); // exibirá '20px';

html<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
  text
</div>