title: Cannot set property '0' of undefined JavaScript
body: <p>I'm trying to create a JavaScript code that applies properties from an object to a HTML element's style, but there's something wrong in the code. I know I can do it the other ways, but this is what I'm trying to do.</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 elem = {background:"red",
              position:"fixed", 
              height:"25px",
              width:"100px"
             }; 
  
  var htmlObj = document.querySelector(".element");
  var x; 
  
  var cssProperties = Object.getOwnPropertyNames(elem);
  
  for(x in cssProperties){
    htmlObj.style.cssProperties[x] = elem[cssProperties[x]];
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="element"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am getting the below error:</p>
  <p><img src="https://i.stack.imgur.com/J9npt.png" alt="error message: uncaught type error" /></p>
  <p>What am I missing?</p>