title: detecting true border, padding and margin from Javascript
body: <p>Is there a way to detect the true border, padding and margin of elements from Javascript code? If you look at the following code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
          &lt;!--
          .some_class {
              padding-left: 2px;
              border: 2px solid green;
          }   
          --&gt;
          &lt;/style&gt;
          &lt;script&gt;
          &lt;!--
          function showDetails()
          {
              var elem = document.getElementById("my_div");
              alert("elem.className=" + elem.className);
              alert("elem.style.padding=" + elem.style.padding);
              alert("elem.style.paddingLeft=" + elem.style.paddingLeft);
              alert("elem.style.margin=" + elem.style.margin);
              alert("elem.style.marginLeft=" + elem.style.marginLeft);
              alert("elem.style.border=" + elem.style.border);
              alert("elem.style.borderLeft=" + elem.style.borderLeft);
          }
          --&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="my_div" class="some_class" style="width: 300px; height: 300px; margin-left: 4px;"&gt;
              some text here
          &lt;/div&gt;
          &lt;button onclick="showDetails();"&gt;show details&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>you can see, if you click the button, that the padding is not reported right. Only the properties defined directly through "style" are reported back, those defined through a CSS class are not reported.</p>
  
  <p>Is there a way to get back the final values of these properties? I mean the values obtained after all CSS settings are computed and applied by the browser.</p>