ジャバスクリプトでfont-sizeを表示させるプログラム↓↓↓
一番下の【サンプル】を表示するhtmlとjavascript
<h1 id="ckh1">
h1タグの初期フォントサイズ:<span id="htagsize1"></span></h1>
<h2 id="ckh2">
h2タグの初期フォントサイズ:<span id="htagsize2"></span></h2>
<h3 id="ckh3">
h3タグの初期フォントサイズ:<span id="htagsize3"></span></h3>
<h4 id="ckh4">
h4タグの初期フォントサイズ:<span id="htagsize4"></span></h4>
<h5 id="ckh5">
h5タグの初期フォントサイズ:<span id="htagsize5"></span></h5>
<h6 id="ckh6">
h6タグの初期フォントサイズ:<span id="htagsize6"></span></h6>
<script type="text/javascript">
function setFontSize() {
for (var i = 1; i < 7; i++) {
var target = document.getElementById( "ckh" + i );
document.getElementById( "htagsize" + i ).innerHTML = document.defaultView.getComputedStyle( target , null ).fontSize;
}
}
window.onload = setFontSize;
</script>
まずdocument.getElementById( "ckh" + i )でidがckhのタグのElementオブジェクトを取得している、iはfor文で１～６のhタグのElementオブジェクトを取得するために設定した
idがhtagsizeのspanタグにhタグのfont-sizeをピクセルで表示したかったので
document.getElementById( "htagsize" + i ).innerHTML = document.defaultView.getComputedStyle( target , null ).fontSize;
document.getElementById( "htagsize" + i ).innerHTML ←これがフォントサイズを表示したい箇所に数値をいれているソース
document.defaultView.getComputedStyle( target , null ).fontSize; ←これがフォントサイズをしりたいタグを指定している
document.defaultView.getComputedStyleの引数で( target , null )としているがtargetはvar target = document.getElementById( "ckh" + i );でckh+iのidのElementオブジェクトを取得してtargetという変数に格納している、そのtarget変数をgetComputedStyleの第一引数に指定することでフォントサイズが取得できる、第２引数はnullでよい
document.defaultView.getComputedStyle( target , null ).color;で色も取得できる
【サンプル】
