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

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

DOMのpaddingTopプロパティは、HTMLの要素の上部のパディングを設定するために使用されます。要素の境界内にスペースを挿入することを忘れないでください。また、上部のパディングを返すためにも使用されます。デフォルト値は0です。

構文

以下は構文です-

  • 上部のパディングを返す構文
object.style.paddingTop
  • 上部のパディングを設定する構文
object.style.paddingTop = "%|length|initial|inherit"

ここで、％は上部のパディング、長さ 長さ（単位）の一番上のパディング、初期 プロパティをデフォルト値に設定するために使用され、inheritは継承に使用されます プロパティフォームの親要素。

例

ここで、paddingTopプロパティを実装する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   #sample {
      border: 2px dashed #ded575;
   }
</style>
</head>
<body>
<div id="sample">Demo text!</div>
<br>
<button type="button" onclick="demo()">Update</button>
<script>
   function demo() {
      document.getElementById("sample").style.paddingTop = "80px";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

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

上の[更新]ボタンをクリックすると、次のように表示されます。 padding-topプロパティを使用してトップパディングを簡単に設定できるようになりました-

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


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

    HTML DOMスタイルのpaddingRightプロパティは、HTML要素に右パディングを返し、追加します。 構文 以下は構文です- 1.パディングを返すRight object.style.paddingRight 2. paddingRightを追加します object.style.paddingRight=”value” ここでは、「値 」は次のようになります- 値 詳細 長さ 長さの単位で値のパディングを定義します。 初期 パディングをデフォルト値に定義します。 継承 このパディングでは、親要素から継承されます。 パーセンテージ（％）

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

    HTML DOM borderTopプロパティは、要素のTopborderプロパティを取得または設定するための省略形として使用されます。 borderTopプロパティには、border-Top-width、border-Top-style、border-Top-colorが含まれています。 以下は、-の構文です。 borderTopプロパティの設定： object.style.borderTop = "width style color|initial|inherit" 上記の特性は次のように説明されます- パラメータ 説明 幅 上枠の幅を設定します。