HTML DOM スタイルの paddingRight プロパティの使い方を解説
HTML DOM の paddingRight プロパティは、HTML 要素の右側のパディング（内側余白）を取得・設定するために使用されます。JavaScript から動的に要素の右パディングを操作したい場合に便利なプロパティです。
構文
paddingRight プロパティの基本的な構文は以下のとおりです。
1. 右パディングの値を取得する場合
object.style.paddingRight
2. 右パディングの値を設定する場合
object.style.paddingRight = "値";
「値」には以下のいずれかを指定できます。
| 値 | 説明 |
|---|---|
| length（長さ） | px や em などの長さの単位でパディングを指定します。 |
| initial | パディングをデフォルト値（初期値）に戻します。 |
| inherit | 親要素からパディングの値を継承します。 |
| percentage（%） | 親要素の幅に対する割合（パーセンテージ）でパディングを指定します。 |
それでは、実際に HTML DOM Style の paddingRight プロパティを使ったサンプルコードを見てみましょう。
サンプルコード
以下の例では、ボタンをクリックすると赤いボックスの右側にパディングが追加される仕組みです。
<!DOCTYPE html>
<html>
<head>
<style>
.outer-box {
background-color: #db133a;
width: 300px;
height: 300px;
margin: 1rem auto;
}
.inner-box {
background-color: #C3C3E6;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<h1>HTML DOM Style paddingRight Property Demo</h1>
<div class="outer-box">
<div class="inner-box">
</div>
</div>
<button type="button" onClick='addPadding()'>Add Padding</button>
<script>
function addPadding() {
var outerBox = document.querySelector('.outer-box')
outerBox.style.paddingRight = '20px';
}
</script>
</body>
</html>
実行結果
ページを表示すると、最初は以下のように赤いボックスの中に紫のボックスが配置されています。
ここで「Add Padding」ボタンをクリックすると、JavaScript の addPadding() 関数が実行され、赤いボックスの右側に 20px のパディングが追加されます。その結果、内側の紫のボックスが左に押し込まれるように表示が変化します。
このように、paddingRight プロパティを使えば、ユーザーの操作に応じて要素の右パディングを動的に変更できます。レイアウトの調整やインタラクティブな UI の実装など、さまざまな場面で活用できるので、ぜひ覚えておきましょう。
-
HTML DOM Style transformStyleプロパティの使い方を徹底解説
HTML DOMのtransformStyleプロパティは、HTML文書内の要素に対して2Dまたは3D変換を取得・適用するために使用されます。特に、子要素の3D位置情報を保持するかどうかを制御したい場合に活用できる重要なスタイルプロパティです。構文transformStyleプロパティの基本的な構文は以下の通りです。値の取得object.style.transformStyle値の設定object.style.transformStyle = value設定できる値transformStyleプロパティには、以下の値を指定できます。値説明inherit親要素からこのプロパティの値を継承します。
-
HTML DOMのpaddingTopプロパティとは？使い方とサンプルコードを解説
DOMのpaddingTopプロパティは、HTML要素の上部パディング（top padding）を設定するために使用されます。パディングとは、要素の境界線（border）の内側に挿入される余白のことです。このプロパティを使えば、現在設定されている上部パディングの値を取得することも可能です。デフォルト値は「0」です。 構文 paddingTopプロパティの基本的な構文は以下の通りです。 上部パディングの値を取得する場合 object.style.paddingTop 上部パディングの値を設定する場合 object.style.paddingTop = "%|length|initial