HTML DOMのpaddingTopプロパティとは？使い方とサンプルコードを解説
DOMのpaddingTopプロパティは、HTML要素の上部パディング（top padding）を設定するために使用されます。パディングとは、要素の境界線（border）の内側に挿入される余白のことです。このプロパティを使えば、現在設定されている上部パディングの値を取得することも可能です。デフォルト値は「0」です。
構文
paddingTopプロパティの基本的な構文は以下の通りです。
上部パディングの値を取得する場合
object.style.paddingTop
上部パディングの値を設定する場合
object.style.paddingTop = "%|length|initial|inherit"
それぞれの値の意味は次の通りです。
- %：親要素の幅に対する割合（パーセント）で上部パディングを指定します。
- length：pxやemなどの長さの単位で上部パディングを指定します。
- initial：プロパティをデフォルト値に設定します。
- 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>
実行結果
上記のコードを実行すると、次のような表示になります。
続いて、画面上の「Update」ボタンをクリックすると、表示は次のように変化します。paddingTopプロパティを使うことで、上部パディングを簡単に設定できることが確認できます。
-
HTML DOM スタイルの paddingRight プロパティの使い方を解説
HTML DOM の paddingRight プロパティは、HTML 要素の右側のパディング（内側余白）を取得・設定するために使用されます。JavaScript から動的に要素の右パディングを操作したい場合に便利なプロパティです。 構文 paddingRight プロパティの基本的な構文は以下のとおりです。 1. 右パディングの値を取得する場合 object.style.paddingRight 2. 右パディングの値を設定する場合 object.style.paddingRight = 値; 「値」には以下のいずれかを指定できます。 値説明 length（長さ）px や em など
-
【HTML DOM】borderTopプロパティの使い方とサンプルコード解説
HTML DOM の borderTop プロパティとはHTML DOM の borderTop プロパティは、要素の上側（トップ）のボーダーに関するスタイルを、まとめて取得・設定できるショートハンド（省略記法）です。このプロパティひとつで、border-top-width（幅）、border-top-style（スタイル）、border-top-color（色）の3つの値を同時に操作できます。構文borderTop プロパティを設定する場合の構文は以下のとおりです。object.style.borderTop = "width style color|initial|inherit