JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでフォントの太さ（ウェイト）を設定する方法

JavaScriptでフォントの太さを設定するには、fontWeightプロパティを使用します。このプロパティには「normal」「bold」「bolder」「lighter」などのキーワード、または100〜900までの数値（100刻み）を指定できます。数値が大きいほど文字が太く表示され、例えば「800」は非常に太いウェイトに相当します。

サンプルコード

以下のコードを実行すると、JavaScriptでフォントの太さを設定する動作を実際に確認できます。ボタンをクリックすると、指定した要素のフォントファミリーとフォントの太さが同時に変更されます。

<!DOCTYPE html>
<html>
   <body>
      <h1>Heading 1</h1>
      <p id="myID">
         This is Demo Text.
      </p>
      <button type="button" onclick="display()">フォントと太さを設定</button>
      <script>
         function display() {
            document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
            document.getElementById("myID").style.fontWeight = "800";
         }
      </script>
   </body>
</html>

コードのポイント

ボタンがクリックされるとdisplay()関数が実行され、document.getElementById()で取得した要素のstyle.fontWeightに「800」が設定されます。フォントの太さだけを変更したい場合は、fontWeightの指定のみを使用してください。なお、フォントによっては対応するウェイトが用意されていない場合があるため、実際の表示結果は使用するフォントに依存します。

  1. JavaScriptでフォントの太さ（ウェイト）を設定する方法

    JavaScriptでフォントの太さを設定するには、fontWeightプロパティを使用します。このプロパティには「normal」「bold」「bolder」「lighter」などのキーワード、または100〜900までの数値（100刻み）を指定できます。数値が大きいほど文字が太く表示され、例えば「800」は非常に太いウェイトに相当します。サンプルコード以下のコードを実行すると、JavaScriptでフォントの太さを設定する動作を実際に確認できます。ボタンをクリックすると、指定した要素のフォントファミリーとフォントの太さが同時に変更されます。<!DOCTYPE html> <h

  2. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE