Распаковка значений CSS свойств в JavaScript

При чтении атрибута style сокращенные CSS свойства распаковываются в свои полные свойства. Давайте посмотрим, что имеется ввиду. Пусть у нас задан отступ для всех сторон:

javascriptelem.style.margin = '20px';

Выведем его:

javascriptconsole.log(elem.style.margin); // выведет '20px';

При этом чтение свойств для отдельных сторон также будет доступно:

javascriptconsole.log(elem.style.marginLeft); // выведет '20px';
Задание 1

Дан див:

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

Дана также кнопка. По клику на кнопку выведите толщину границы, ее тип и цвет.