Search notes:

Browser Object Model: window.getComputedStyle

window.getComputedStyle(elem) returns a CSSStyleDeclaration object (or interface?) that can be queried for CSS style values of an HTML element.

The following example queries a few CSS values for the <body>.

Since there is no explicit CSS set for this element, it prints the «default» values.

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>window.getComputedStyle</title>

  <script type='text/javascript'>


    function printStyleValue(outTable, compStyle, styleName) {

      var tr     = document.createElement('tr');
      var tdName = document.createElement('td');
      var tdVal  = document.createElement('td');

      tdName.innerHTML = styleName + ':';
      tdVal.innerHTML  = compStyle[styleName];

      tr.appendChild(tdName);
      tr.appendChild(tdVal );
      outTable.appendChild(tr);

    }

    function main() {

      var out       = document.getElementById('out');
      var compStyle = window.getComputedStyle(document.body);

      printStyleValue(out, compStyle, 'position');
      printStyleValue(out, compStyle, 'top'     );
      printStyleValue(out, compStyle, 'bottom'  );
      printStyleValue(out, compStyle, 'left'    );
      printStyleValue(out, compStyle, 'right'   );
      printStyleValue(out, compStyle, 'width'   );
      printStyleValue(out, compStyle, 'height'  );
    }

  </script>


</head>
<body onload='main()' style='margin: 0'>

  <table id='out'></table>

</body>
</html>

Github repository Browser-Object-Model, path: /window/getComputedStyle.html

When run in a browser, the above HTML document might print:

Browser Object Model: window.getComputedStyle

See also