HTML DOM paddingLeftプロパティとは?構文と使い方をサンプルコードで解説
HTML DOMのpaddingLeftプロパティは、HTML要素の左側のパディング(内側の余白)を取得したり、設定したりするために使用されます。JavaScriptから動的に要素のスタイルを変更したい場合に便利です。
構文
paddingLeftプロパティの基本的な構文は以下の通りです。
1. 左パディングを取得する場合
object.style.paddingLeft
2. 左パディングを設定する場合
object.style.paddingLeft="value"
指定できる値
「value」には以下のいずれかの値を指定できます。
| 値 | 説明 |
|---|---|
| length | pxやemなどの長さの単位でパディングを指定します。 |
| initial | パディングをデフォルト値にリセットします。 |
| inherit | 親要素のパディングの値を継承します。 |
| percentage(%) | 親要素の幅に対する割合(%)でパディングを指定します。 |
サンプルコード
それでは、paddingLeftプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML DOM paddingLeft property</title>
<style>
.outer-box{
background-color:#db133a;
width:300px;
height:300px;
margin:1rem auto;
}
.inner-box{
background-color:#C3C3E6;
width:150px;
height:150px;
}
</style>
</head>
<body>
<h1>paddingLeft Property Example</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.paddingLeft='20px';
console.log(outerBox.style.paddingLeft);
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような出力が得られます。
「Add Padding」ボタンをクリックすると、赤いボックスの内側に左パディングが追加されます。
また、ボタンをクリックした際にコンソールには次のように表示されます。
このように、paddingLeftプロパティを使えば、JavaScriptで簡単に要素の左パディングを操作することができます。
-
HTML DOMのnameプロパティとは？構文と使い方を実例で解説
HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン
-
HTML DOM textContentプロパティの使い方を徹底解説
HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ