title: Can't get width property with JavaScript
body: <p>My idea is when I click on the button, the <code>div#x </code>will lose 1% of width. Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#a').onclick = function() {
      var
          lost = document.querySelector('#x').style.width,
          lost = lost.slice(0, -1);
      lost = Number(lost);
      lost -= 1;
      document.querySelector('#x').style.width = lost + '%';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav#control {
      display: flex;
      flex-basis: 50px;
      align-items: center;
      justify-content: center;
      background: #FFF;
      padding: 5px;
      width: 100%
  }
  
  .knob {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      cursor: pointer
  }
  
  #b {
      position: relative;
      flex-grow: 1;
      background: #EFEFEF;
      margin: 0 10px;
      height: 30px
  }
  #x {
      position: absolute;
      background: #4C8EFA;
      width: 100%; height: 30px;
      border-radius: 1px;
      z-index: 2
  }
  #c {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id='control'&gt;
      &lt;section id='a' class='knob'&gt;&lt;img src='x.png'/&gt;&lt;/section&gt;
      &lt;section id='b'&gt;
          &lt;div id='x'&gt;&lt;/div&gt;
          &lt;div id='c'&gt;background&lt;/div&gt;
      &lt;/section&gt;
      &lt;section id='d' class='knob'&gt;&lt;img src='x.png'/&gt;&lt;/section&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The blue bar (<code>div#x</code>) is supposed to be shorter 1% every time I click on the left button (<code>section#a</code>). I have check so many times but I still don't know what problem with my code. I did change some code and I think that problem is in this line <code>lost = document.querySelector('#x').style.width</code> because it seems like it doesn't return any value which is supposed to gimme <code>100%</code> width of <code>div#x</code></p>