title: Changing style properties
body: <p>I have an element, where the following style applies:</p>
  
  <pre><code>&lt;style&gt;
      #hover  {
        border: 1px green;
        position: absolute;
        left: -100px; /* Should not be seen initially */
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>In my code, I am reading and modifying the 'left' property. I ended up with the following solution, which does work:</p>
  
  <p>Reading the property:</p>
  
  <pre><code>hover=document.getElementById("hover");
  left=window.getComputedStyle(hover,null).getPropertyValue("left");
  </code></pre>
  
  <p>Changing the property:</p>
  
  <pre><code>hover.style.left="25px";
  </code></pre>
  
  <p>I found this seeming asymmetry rather puzzling. For example, the following does not work:</p>
  
  <p>Reading the property - <strong>does not work that way, always returns empty string</strong></p>
  
  <pre><code>left=hover.style.left
  </code></pre>
  
  <p>Changing the property - <strong>gives error 'modifications not allowed in this object'</strong></p>
  
  <pre><code>computedStyle = window.getComputedStyle(hover,null);
  computedStyle.setProperty("left",'-101px','important');
  </code></pre>
  
  <p>I'm aware that my last attempt is even incomplete; after creating a new style object, I need somhow to put it back to the element, but the error message already occurs when I call setProperty.</p>
  
  <p>Now my question: Is it true, that the only way to get and set a style property, is as I did it initially, or is there another possibility where I can achieve the same goal? In particular, I wonder why I can not <strong>read</strong> a style with the expression 'hover.style.left', but only set it.</p>