HTML DOM の fontWeight プロパティとは？構文・指定できる値・サンプルコードを解説
HTML DOM の fontWeight プロパティは、要素のテキスト文字の太さ（フォントウェイト）を設定または取得するために使用されます。JavaScript を使って動的に文字の太さを変更したい場合に非常に便利なプロパティです。
fontWeight プロパティの構文
fontWeight プロパティを設定する際の構文は以下の通りです。
object.style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"
それぞれの値の意味は、以下の表の通りです。
| 値 | 説明 |
|---|---|
| normal | デフォルト値です。フォントに特別な変更を加えません。 |
| lighter | フォントがより細く（ライトに）表示されます。 |
| bold | フォントを太字に設定します。lighter よりも太い表示になります。 |
| bolder | フォントをより太く設定します。bold よりも太い表示になります。 |
| 100 200 300 400 500 600 700 800 900 | 細字から太字までの段階を数値で指定できます。400 が normal（標準）、700 が bold（太字）に相当します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
それでは、fontWeight プロパティの具体的な使用例を見てみましょう。
使用例
以下の例では、ボタンをクリックすると 2 つの div 要素内のテキストが太字に変化します。
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontWeight() {
document.getElementById("demo1").style.fontWeight="bold";
document.getElementById("demo2").style.fontWeight="bold";
document.getElementById("Sample").innerHTML="The font weight has been changed for the above paragraphs";
}
</script>
</head>
<body>
<div id="demo1" >This is demo text</div>
<div id="demo2">This is demo text</div>
<p>Change the font weight for the text inside above divs by clicking the below button</p>
<button onclick="changeFontWeight()">Change font Weight </button>
<p id="Sample"></p>
</body>
</html>出力結果
ページを開くと、最初は以下のように標準の太さでテキストが表示されます。
「Change font Weight」ボタンをクリックすると、テキストが太字に変わり、以下のように表示されます。
まとめ
fontWeight プロパティを使えば、JavaScript から要素の文字の太さを簡単に制御できます。キーワード（normal・bold など）だけでなく、100〜900 の数値による細かい指定にも対応しているため、ユーザーの操作に応じた動的な強調表示など、さまざまな場面で活用できます。
-
【初心者向け】HTML DOMスタイルのfontFamilyプロパティの使い方とサンプルコード
HTML DOMスタイルのfontFamilyプロパティとはHTML DOMのfontFamilyプロパティは、選択した要素に対してフォントファミリー（フォントのリスト）を設定または取得するために使用されるプロパティです。フォントを指定する際には、多くの環境で表示できるWebセーフフォントを使用し、さらに代替となるフォントを併せて指定することが推奨されています。構文fontFamilyプロパティを設定する場合の構文は以下のとおりです。object.style.fontFamily = font1, font2, etc.|initial|inheritここで、font1、font2などはカンマ
-
HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説
HTML DOMのStyleオブジェクトが持つfontプロパティは、CSSのフォントに関する6つの個別プロパティ（font-style、font-variant、font-weight、font-size、line-height、font-family）を一括して取得・設定するために使用されます。このうちfont-size（フォントサイズ）とfont-family（フォントファミリー）は必須の値であり、省略された他の値にはデフォルト値が自動的に適用されます。 fontプロパティの値を取得する構文 現在設定されているfontプロパティの値を取得する場合は、以下の構文を使用します。 object.