HTML DOM スタイルの padding プロパティとは?使い方を実例付きで解説
HTML DOM のスタイル padding プロパティは、HTML ドキュメント内の要素のパディング(内側の余白)を取得したり、動的に変更したりするために使用されます。JavaScript から要素のスタイルを操作することで、ユーザーの操作に応じてレイアウトを柔軟に変化させることができます。
構文
padding プロパティの基本構文は以下のとおりです。
パディング値を取得する場合
object.style.padding
パディング値を設定する場合
object.style.padding = "value";
設定できる主な値は次のとおりです。
- length:px や em などの単位で余白を指定します。
- %:親要素の幅に対する割合で指定します。
- initial:プロパティを初期値に戻します。
- inherit:親要素の値を継承します。
また、「10px 30px」のように半角スペース区切りで指定すると、上下に 10px、左右に 30px というように複数方向へ一括で設定できます。
サンプルコード
それでは、HTML DOM スタイル padding プロパティの具体的な使用例を見てみましょう。
<!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 プロパティの例</h1>
<p>
こんにちは!ランダムなテキストを含む素晴らしい段落です。こんにちは!ランダムなテキストを含む素晴らしい段落です。こんにちは!ランダムなテキストを含む素晴らしい段落です。
</p>
<button onclick="add()" class="btn">パディングを追加</button>
<script>
function add() {
document.querySelector('p').style.padding = "10px 30px";
}
</script>
</body>
</html>実行結果
上記のコードをブラウザで実行すると、次のような画面が表示されます。
ここで「パディングを追加」ボタンをクリックすると、JavaScript の onclick イベントによって add() 関数が呼び出され、段落要素に対して「10px 30px」のパディングが適用され、文字の周りに余白が広がります。
このように padding プロパティを使えば、CSS を事前に定義していなくても、JavaScript の処理だけで要素の余白を自由に制御できるため、ボタン操作やスクロールなどに連動した動的な UI 演出にも活用できます。
-
HTML DOMのpaddingTopプロパティとは？使い方とサンプルコードを解説
DOMのpaddingTopプロパティは、HTML要素の上部パディング（top padding）を設定するために使用されます。パディングとは、要素の境界線（border）の内側に挿入される余白のことです。このプロパティを使えば、現在設定されている上部パディングの値を取得することも可能です。デフォルト値は「0」です。 構文 paddingTopプロパティの基本的な構文は以下の通りです。 上部パディングの値を取得する場合 object.style.paddingTop 上部パディングの値を設定する場合 object.style.paddingTop = "%|length|initial
-
HTML DOM スタイルの paddingRight プロパティの使い方を解説
HTML DOM の paddingRight プロパティは、HTML 要素の右側のパディング（内側余白）を取得・設定するために使用されます。JavaScript から動的に要素の右パディングを操作したい場合に便利なプロパティです。 構文 paddingRight プロパティの基本的な構文は以下のとおりです。 1. 右パディングの値を取得する場合 object.style.paddingRight 2. 右パディングの値を設定する場合 object.style.paddingRight = 値; 「値」には以下のいずれかを指定できます。 値説明 length（長さ）px や em など