Code to modify DOM element using DOM.style property So, I've a code that is below which works just fine:

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt; Javascript Practice &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="myDiv"&gt;
    &lt;/div&gt;
    &lt;script&gt;
      var a = 0;
      var b = 255;
      var c = 0;
      var color2 = 'RGB(' + a + ',' + b + ',' + c + ')';

      document.getElementById("myDiv").style.backgroundColor = color2;
      document.getElementById("myDiv").style.width = 50;
      document.getElementById("myDiv").style.height = 300;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;


I've got a lot of feedback saying that when accessing DOM style property, I need to set value as strings such as setting DOM.style.width not to a number like I've done here but appending w + "px" 

I'm puzzled because I'm using Brackets as a code editor and deploying this on chrome. My code runs just fine and every time I load the HTML page, it initializes a div of the required dimensions. Everyone tells me it won't work which is what's confusing me. 

TIA.
Inline style lengths require units. In quirks mode, browsers will assume pixels as the unit, if provided with an integer instead of a length. If you are not sure how the browser will handle the value, specify the units.


  The CSS parser interprets unitless numbers as px (except for line-height and any other properties where they have distinct meaning, and except in shorthands).


Bonus: Here is an extensible version of your script.



const state = {
  color : { r : 0, g : 255, b : 0 },
  dimensions : { width : 50, height : 300 }
}

const applyState = (el, state) =&gt; {
  Object.assign(el.style, {
    backgroundColor: `rgb(${state.color.r}, ${state.color.g}, ${state.color.b})`,
    width: `${state.dimensions.width}px`,
    height: `${state.dimensions.height}px`
  })
}

applyState(document.getElementById('my-div'), state)
&lt;div id="my-div"&gt;&lt;/div&gt;