<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>

#box1 {
  width: 50px;
  color: yellow;
  background-color: blue;
}

#box2 {
  width: 80px;
  color: rgb(255, 255, 255);
  background-color: rgb(15, 99, 30);
}

#box3 {
  width: 40px;
  color: #fcc;
  background-color: #123456;
}

#box4 {
  width: 70px;
  background-color: #f11;
}

{
  const ex1 = $('#box1').css('background-color')
  const ex2 = $('#box2').css(['width', 'height', 'color', 'background-color'])
  const ex3 = $('#box3').css('color', 'red')
  const ex4 = $('#box4').css({'background-color': 'yellow', 'font-weight': 'bolder'})
  
  console.log(ex1)
  console.log(ex2)
}

{
  const ex1 = window.getComputedStyle(document.querySelector('#box1')).getPropertyValue('background-color')
  const ex2 = ['width', 'height', 'color', 'background-color'].reduce((prev, next) => {
    return {...prev, [next]: window.getComputedStyle(document.querySelector('#box2')).getPropertyValue(next)}
  }, {})
  const ex3 = document.querySelector('#box3').style.setProperty('color', 'red')
  const ex4 = Object.assign(document.querySelector('#box4').style, {
    'background-color': 'yellow',
    'font-weight': 'bold',
  })
  
  console.log(ex1)
  console.log(ex2)
}