設定されているスタイル値の取得
■getComputedStyle()メソッドを使う
・外部CSSファイルでのスタイル設定、親要素からの継承なども含め実際に適用され
ている全てのスタイルを参照できる。ただし読み込み専用。
・IEは未対応（IE9から対応）
・(書式）変数 = getComputedStyle(Element, '');
引数Element･･･スタイルを取得したHTML要素
第二引数･･･通常""かnullでよい（疑似要素を対象ににするかどうか）
・例
var smp = document.getElementById("sample");
var style = getComputedStyle(smp,'');
fs = style.fontSize; //id="sample"要素のフォントサイズを取得する
■IE8までの場合、currentStyleプロパティを使う（Operaも対応）
・(書式）変数 = Element.currentStyle;
・例
var smp = document.getElementById("sample");
var style = smp.currentStyle;
fs = style.fontSize; //id="sample"要素のフォントサイズを取得する
■クロスプラウザ対応にするには
if(ElementNode.currentStyle){
currentStyleプロパティを使って処理
}else{
getComputedStyle(ElementNode,"")メソッドを使って処理
}
・例
var smp = document.getElementById("sample");
var style = "";
if(smp.currentStyle){
style = smp.currentStyle;
}else{
var style = getComputedStyle(smp,'');
}
fs = style.fontSize; //id="sample"要素のフォントサイズを取得する
{width:350px;text-align:center;border:1px solid navy}
(親）H4要素 スタイル設定は外部CSSファイルで
{background-image : url(images/midasi.jpg);background-repeat:no-repeat;
margin-top:0;padding-left:15px;color:navy;
font-weight:500;font-family: "ＭＳ 明朝";
border-left:6px double #0066ff;
border-bottom:1px solid navy}
<head>部の<stayle>タグで
{width:300px;font-size:10pt;
line-height:1.3em;}
target：SPAN要素 スタイル設定は
{width:80%;font-style:italic;
border:0.3mm solid red;}
width：自身の設定スタイル
text-align：親の親を継承
lin-height：親スタイルを継承（IE8は設定値のままで表示されるが、FireFoxはpx変換される）
fontの一括取得はできない
font-weight : 親スタイルを継承
font-style :自身の設定スタイル
font-family : 親スタイルを継承
font-size : 親スタイルを継承（IE8は設定値のままで表示されるが、FireFoxはpx変換される）
color : 親スタイルを継承（IE8は設定値のままで表示されるが、FireFoxはrgb()表示に変換）
border :一括取得はできない
borderTop :これも一括になり取得できない
borderTopColor : 自身の設定スタイル（IE8は設定値のままで表示されるが、FireFoxはrgb()表示に変換）
borderLeftWidth : 自身の設定スタイル（IE8は設定値のままで表示されるが、FireFoxはpx変換）
Sample
ページ全体のする･･･↑
上のSampleのする･･･↑
*外部CSSファイルで設定されているスタイルは「{width:300px;border:solid 1px #009900;
margin-left: -25px;text-align:center;font:lighter 14px 'Arial Black'}」
Sample Source......................................................................>>>
<style type="text/css">
div.oyaoya {width:400px;text-align:center;border:1px solid navy;}
h4.oya {width:350px;font-size:10pt;line-height:1.3em;}
span#target {width:80%;font-style:italic;border:0.3mm solid red;}
</style>
<script type="text/javascript"><!--
function GetStyle1(){ //SPAN要素のスタイルを取得
var span_style = document.getElementById("target");
var sty = "";
if(span_style.currentStyle){
sty = span_style.currentStyle;
}else{
sty = getComputedStyle(span_style, '');
}
document.getElementById("view").innerHTML = "<p>width
: " + sty["width"] + "<br>
text-align : " + sty.textAlign + "<br>line-height
: " + sty.lineHeight + "<br>font : "
+ sty.font + "<br>font-weight : " + sty.fontWeight + "<br>font-style : " +
sty.fontStyle + "<br>font-family : " + sty.fontFamily
+ "<br>font-size : " +
sty.fontSize + "<br>color : " + sty.color + "<br>border : " + sty.border +
"<br>borderTop : " + sty.borderTop + "<br>borderTopColor : " + sty.borderTopColor
+ "<br>borderLeftWidth : " + sty.borderLeftWidth
+ "</p>";}
function GetStyleBody(){ //ページ全体のスタイルを取得
var sty = "";
if(document.body.currentStyle){
sty = document.body.currentStyle;
}else{
sty = getComputedStyle(document.body, '');
}
document.getElementById("view").innerHTML = (省略、上と同じ）
}
function GetStyle2(){ //Sampleのスタイルを取得
var t1 = document.getElementById("test1");
var sty = "";
if(t1.currentStyle){
sty = t1.currentStyle;
}else{
sty = getComputedStyle(t1, '');
}
document.getElementById("view").innerHTML = (省略、上と同じ）
}
// --></script>
</head>
<body>
<div class="oyaoya">(親の親）DIV要素
<h4 class="oya">(親）H4要素
<span id="target">target：SPAN要素</span>
</h4>
</div>
<div style="font:12px 'ＭＳ 明朝'">
SPAN要素の<button onclick="GetStyle1()">スタイルを取得</button><br>
<div id="view" style="width:220px;height:270px;font:12px 'ＭＳ 明朝';border:3px double red;float:left"></div>
<h5 id="test1">Sample</h5>
<P>ページ全体の<button onclick="GetStyleBody()">スタイルを取得</button>する</p>
<p>上のSampleの<button onclick="GetStyle2()">設定スタイルを取得</button>する</p>