title: Javascript Create Object with property that is dynamic
body: <pre><code>    &lt;body&gt;
          &lt;div id="player" style="position: absolute; left: 30px;"&gt;Hello&lt;/div&gt;
          &lt;script&gt;
              function Player (element) {
                  this.element = element;
                  this.left = element.style.left;
              }
  
              var player = new Player(document.querySelector('#player'));
              console.log(player.left);
          &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>I have something above. If I call console.log(player.left). It return me <code>30px</code>. Then I change left property (in dev tool). I still get <code>30px</code> . The question is Whether it have a way that <code>left property of Player class</code> can change value dynamically whenever I change that element's left OR I have to assign value: <code>player.left = document.querySelector("#player").style.left</code> again?</p>