ViewCSSのサンプル

サンプル1

これを囲っているP要素にはいろんなスタイル場所でmargin, borderにスタイルが指定されていますが、結果こういうことになっています。

ソース1

p{margin:0.4em 0em;} /*common.cssで指定、外部読み込み*/
.sample{border:3px solid #ffbbbb;} /*samples.cssで指定、外部読み込み*/
<style type="text/css"> /*Style要素で指定*/
p#test{border-style:outset; padding:5px; margin-left:2em; margin-right:2em;}
</style>
<p class="sample" id="test">
これを囲っているP要素にはいろんなスタイル場所でmargin, borderにスタイルが指定されていますが、結果こういうことになっています。
<input type="button" value="見る" onclick="computedStyle();" />
</p>
function computedStyle(){
  var testElm = document.getElementById('test');
  var style = testElm.currentStyle || document.defaultView.getComputedStyle(testElm, null);
  result = "";
  result += "border: " + style.border + "\n";
  result += "border-width: " + style.borderWidth + "\n";
  result += "border-style: " + style.borderStyle + "\n";
  result += "border-color: " + style.borderColor + "\n";
  result += "margin: " + style.margin + "\n";
  result += "margin-top: " + style.marginTop + "\n";
  result += "margin-right: " + style.marginRight + "\n";
  result += "margin-bottom: " + style.marginBottom + "\n";
  result += "margin-left: " + style.marginLeft + "\n";
  alert(result);
}

実行してみたらこうなりました。
各ブラウザ実行結果