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

HTMLDOMスタイルのlineHeightプロパティ

HTML DOMスタイルのlineHeightプロパティは、テキスト内の行間の距離である行の高さを設定するために使用されます。

以下は、lineHeightプロパティを設定するための構文です-

object.style.lineHeight

以下は、lineHeightプロパティを返す構文です-

object.style.lineHeight = "normal|number|length|%|initial|inherit"

上記の値は以下のとおりです-

  • 通常： 通常の線の高さ。デフォルト。
  • 番号： 数値に現在のフォントサイズを掛けて、行の高さを設定します
  • 長さ： 長さの単位で表した行の高さ
  • ％： 現在のフォントサイズの％で表した行の高さ
  • 初期： このプロパティをデフォルト値に設定します。
  • 継承： 親要素からこのプロパティを継承します。

ここで、DOMスタイルのlineHeightプロパティを実装する例を見てみましょう-

例

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<div id="myid">
Here, we have set demo text. Here, we have set demo text. Here, we have set demo text. Here,
we have set demo text. Here, we have set demo text. Here, we have set demo text. Here, we
have set demo text. Here, we have set demo text.
Here, we have set demo text. Here, we have set demo text. Here, we have set demo text. Here,
we have set demo text. Here, we have set demo text. Here, we have set demo text.
</div>
<br>
<button type="button" onclick="display()">Click to increase the line height</button>
<script>
   function display() {
      document.getElementById("myid").style.lineHeight = "3";
   }
</script>
</body>
</html>

出力

HTMLDOMスタイルのlineHeightプロパティ

次に、ボタンをクリックして線の高さを設定します-

HTMLDOMスタイルのlineHeightプロパティ


  1. HTMLDOMスタイルのuserSelectプロパティ

    HTML DOMスタイルのuserSelectプロパティは、HTMLドキュメントで要素のテキストをユーザーが選択できるかどうかを返し、変更します。 構文 以下は構文です- userSelectを返す object.style.userSelect userSelectの変更 object.style.userSelect = “value” 値 ここで、値は-になります。 値 説明 auto ユーザーはブラウザの設定に応じてテキストを選択できます。 なし ユーザーがテキストを選択することはできません。 テキスト その中で、テ

  2. HTMLDOMスタイル方向プロパティ

    HTML DOMスタイルの方向プロパティは、テキストの方向を指定または返すために使用されます。デフォルト値はltrです。 以下は、-の構文です。 方向プロパティの設定- object.style.direction = "ltr|rtl|initial|inherit" 上記のプロパティ値は次のように説明されます- 値 説明 ltr これはデフォルト値であり、テキストは左から右に流れます。 rtl テキストは右から左に流れます。 初期 このプロパティを初期値に設定します。 継承 親プロパティ値を継承するに