style.paddingは、要素のスタイル属性のpaddingプロパティの値を取得、もしくは、設定するプロパティ。
paddingプロパティは、要素の上下左右のパディング（内側の余白）を一括指定することができる。
構文
取得
var $padding = $elementReference.style.padding;
戻り値
要素のスタイル属性のpaddingプロパティの値。
設定
$elementReference.style.padding = "length | percentage | inherit";
- length | percentage | inherit
- 要素の上下左右のパディングを指定。
- 下記の何れかの方法で指定する。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- percentage：「%」や「em」を付けた割合で指定。
- inherit：親要素の設定を継承。
上下左右のパディングを同じ値に指定することもできるし、別々の値に指定することもできる。
サンプル
変更後のpaddingプロパティの値：
サンプルの動作について
- 「設定（0px）」ボタンをクリックすると、青い枠線のボックス要素の上下左右のパディングを「0px」にし、「変更後のpaddingプロパティの値：」の右横に「0px」と表示する。
- 「設定（10px）」ボタンをクリックすると、青い枠線のボックス要素の上下左右のパディングを「10px」にし、「変更後のpaddingプロパティの値：」の右横に「10px」と表示する。
- 「設定（50px）」ボタンをクリックすると、青い枠線のボックス要素の上下左右のパディングを「50px」にし、「変更後のpaddingプロパティの値：」の右横に「50px」と表示する。
- 「設定（1em）」ボタンをクリックすると、青い枠線のボックス要素の上下左右のパディングを「1em」にし、「変更後のpaddingプロパティの値：」の右横に「1em」と表示する。
- 「設定（10%）」ボタンをクリックすると、青い枠線のボックス要素の上下左右のパディングを「10%」にし、「変更後のpaddingプロパティの値：」の右横に「10%」と表示する。
- 「設定（継承）」ボタンをクリックすると、青い枠線のボックス要素の上下左右のパディングを親要素から継承し、「変更後のpaddingプロパティの値：」の右横に「inherit」と表示する。
- 「設定（10px 20px）」ボタンをクリックすると、青い枠線のボックス要素の上下のパディングを「10px」、左右のパディングを「20px」にし、「変更後のpaddingプロパティの値：」の右横に「10px 20px」と表示する。
- 「設定（10px 20px 30px）」ボタンをクリックすると、青い枠線のボックス要素の上のパディングを「10px」、左右のパディングを「20px」、下のパディングを「30px」にし、「変更後のpaddingプロパティの値：」の右横に「10px 20px 30px」と表示する。
- 「設定（10px 20px 30px 40px）」ボタンをクリックすると、青い枠線のボックス要素の上のパディングを「10px」、右のパディングを「20px」、下のパディングを「30px」、左のパディングを「40px」にし、「変更後のpaddingプロパティの値：」の右横に「10px 20px 30px 40px」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setPadding( $padding ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.padding = $padding;
var $padding = $elementReference.style.padding;
document.getElementById( "sampleOutput" ).innerHTML = $padding;
}
</script>
function setPadding( $padding ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.padding = $padding;
var $padding = $elementReference.style.padding;
document.getElementById( "sampleOutput" ).innerHTML = $padding;
}
</script>
HTML
<div id="sample" style="border: 5px solid blue; background-color: pink; margin: 18px; width: 400px;">
<div style="border: 5px solid red; background-color: yellow; margin: 0; height: 200px;">
</div>
</div>
<button onclick="setPadding('0px');">設定（0px）</button>
<button onclick="setPadding('10px');">設定（10px）</button>
<button onclick="setPadding('50px');">設定（50px）</button>
<button onclick="setPadding('1em');">設定（1em）</button>
<button onclick="setPadding('10%');">設定（10%）</button>
<button onclick="setPadding('inherit');">設定（継承）</button>
<br />
<button onclick="setPadding('10px 20px');">設定（10px 20px）</button>
<button onclick="setPadding('10px 20px 30px');">設定（10px 20px 30px）</button>
<button onclick="setPadding('10px 20px 30px 40px');">設定（10px 20px 30px 40px）</button>
<p>変更後のpaddingプロパティの値：<span id="sampleOutput"></span></p>
<div style="border: 5px solid red; background-color: yellow; margin: 0; height: 200px;">
</div>
</div>
<button onclick="setPadding('0px');">設定（0px）</button>
<button onclick="setPadding('10px');">設定（10px）</button>
<button onclick="setPadding('50px');">設定（50px）</button>
<button onclick="setPadding('1em');">設定（1em）</button>
<button onclick="setPadding('10%');">設定（10%）</button>
<button onclick="setPadding('inherit');">設定（継承）</button>
<br />
<button onclick="setPadding('10px 20px');">設定（10px 20px）</button>
<button onclick="setPadding('10px 20px 30px');">設定（10px 20px 30px）</button>
<button onclick="setPadding('10px 20px 30px 40px');">設定（10px 20px 30px 40px）</button>
<p>変更後のpaddingプロパティの値：<span id="sampleOutput"></span></p>