style.fontWeightプロパティ

投稿日: 2013年11月2日 作成者: alphasis

style.fontWeightは、要素のスタイル属性のfont-weightプロパティの値を取得、もしくは、設定するプロパティ。

font-weightプロパティは、フォントの太さを指定することができる。

太さは９段階で指定できるが、９段階の太さに対応したフォントはほぼなく、「normal（400）」と「bold（700）」の２段階であることが多い。

構文

取得

var $fontWeight = $elementReference.style.fontWeight;

戻り値

要素のスタイル属性のfont-weightプロパティの値。

設定

$elementReference.style.fontWeight = "normal | bold | bolder | lighter | 100～900 | inherit";
normal | bold | bolder | lighter | 100～900 | inherit
下記の何れかの値で指定する。初期設定値は「normal」。
  • normal：標準。数値「400」と同等。
  • bold：太字。数値「700」と同等。
  • bolder：より太い。
  • lighter：より細い。
  • 100～900：100～900の9段階の数値
    • 「100」が最も細い。
    • 「900」が最も太い。
    • 「400」が「normal」と同等。
    • 「700」が「bold」と同等。
  • inherit：親要素の設定を継承。

サンプル




サンプルのfont-weightプロパティの値：

Sample Element / サンプル要素

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを「font-weightプロパティ」の値に設定する。設定値を「サンプルのfont-weightプロパティの値：」の右横に表示する。「Sample Element / サンプル要素 」のテキストを、指定した太さのフォントで表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setFontWeight( $fontWeight ) {
 var $element = document.getElementById( "sample" );
 $element.style.fontWeight = $fontWeight;
 var $fontWeight = $element.style.fontWeight;
 document.getElementById( "sampleOutput" ).innerHTML = $fontWeight;
}
</script>

HTML

<button onclick="setFontWeight('normal');">normal</button>
<button onclick="setFontWeight('bold');">bold</button>
<button onclick="setFontWeight('bolder');">bolder</button>
<button onclick="setFontWeight('lighter');">lighter</button>
<br />
<button onclick="setFontWeight('100');">100</button>
<button onclick="setFontWeight('200');">200</button>
<button onclick="setFontWeight('300');">300</button>
<button onclick="setFontWeight('400');">400</button>
<button onclick="setFontWeight('500');">500</button>
<button onclick="setFontWeight('600');">600</button>
<button onclick="setFontWeight('700');">700</button>
<button onclick="setFontWeight('800');">800</button>
<button onclick="setFontWeight('900');">900</button>
<br />
<button onclick="setFontWeight('inherit');">inherit</button>
<br />
<p>サンプルのfont-weightプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
 Sample Element / サンプル要素
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク