title: Change element.style with JavaScript object
body: <p>First, there are many duplicates for this question but those answers don't give deeper insights.</p>
  
  <p>Q1. Why this results in 200,0 ?</p>
  
  <p>Consider this snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var el = document.querySelector('#r');
  
  console.log('First:: ' + el.offsetHeight);
  
  el.style = {
    height: el.offsetHeight + 500 + 'px'
  }
  
  console.log('Second:: ' + el.offsetHeight);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="r" style="height:200px;width:800px;overflow:auto;border:1px    solid;margin:20px;box-sizing:border-box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I suspect <code>el.style</code> to be read-only , so I expect setting an object should silently fail and therefore I expect the output to be</p>
  
  <p><code>First:: 200,Second:: 200</code></p>
  
  <p>but it is:</p>
  
  <p><code>First:: 200,Second:: 0</code></p>
  
  <p>Why ?</p>
  
  <p>Q2. Why setting el.style using Object.assign works ?</p>
  
  <pre><code>Object.assign(el.style,{
     height : el.offsetHeight + 500 
  })
  </code></pre>
  
  <p>Can someone please explain me with some deeper insights?</p>