title: How to change the width/height element, which has settings in subclass
body: <p>I've a trouble with the style of <code>nav</code> element in my web application.</p>
  
  <p><img src="https://i.stack.imgur.com/cNzMK.png" alt="enter image description here"></p>
  
  <p>As you're able to see, if to focus on element <code>nav#menu.horizontal-menu</code> - I can see the actual width/height of that element in Chrome.</p>
  
  <p>BUT! When I try to obtain that element in JavaScript by the id - <code>menu</code> (as you can see the tag declaration of <code>nav</code> tag in the bottom part of screen):</p>
  
  <p><img src="https://i.stack.imgur.com/M5ELg.png" alt="enter image description here"></p>
  
  <p>There is no both width or height values of it...
  I rather understand, that it may be because of:</p>
  
  <pre><code>`nav#menu.horizontal-menu` != `nav`
  </code></pre>
  
  <p>But, it's only my suggestion... I've tried then to use both functions:</p>
  
  <ul>
  <li>getElementsByClassName()</li>
  <li>querySelector()</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/OD3ag.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/Ci594.png" alt="enter image description here"></p>
  
  <p>But... also no success as you can see in screens, what's wrong and how to get so needed actual width and height options from element?</p>
  
  <p>Thanks!</p>