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

HTMLDOMスタイルのパディングプロパティ

HTML DOMスタイルのパディングプロパティは、HTMLドキュメント内の要素のパディングを返し、変更します。

構文

以下は構文です-

  • パディングを返す

object.style.padding

  • パディングの変更

object.style.padding = “value

例

HTMLDOMスタイルのパディングプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      border: 2px solid #fff;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM Style padding Property Example</h1>
<p>
Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text.
</p>
<button onclick="add()" class="btn">Add padding</button>
<script>
   function add() {
      document.querySelector('p').style.padding = "10px 30px";
   }
</script>
</body>
</html>

出力

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

HTMLDOMスタイルのパディングプロパティ

「パディングを追加」をクリックします 段落要素にパディングを追加するための「」ボタン-

HTMLDOMスタイルのパディングプロパティ


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

    DOMのpaddingTopプロパティは、HTMLの要素の上部のパディングを設定するために使用されます。要素の境界内にスペースを挿入することを忘れないでください。また、上部のパディングを返すためにも使用されます。デフォルト値は0です。 構文 以下は構文です- 上部のパディングを返す構文 object.style.paddingTop 上部のパディングを設定する構文 object.style.paddingTop = "%|length|initial|inherit" ここで、％は上部のパディング、長さ 長さ（単位）の一番上のパディング、初期 プロパティをデフォ

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

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