HTML DOM スタイルの paddingLeft プロパティとは？基本構文と使い方を実例付きで解説
DOM の style.paddingLeft プロパティは、HTML ドキュメント内の要素に設定された「左パディング（要素の内側の左余白）」を取得したり、新しい値を設定して動的に変更したりできるプロパティです。JavaScript から要素のスタイルを操作したい場面でよく活用されます。
構文
paddingLeft プロパティの基本的な構文は以下のとおりです。
値を取得する場合
object.style.paddingLeft
値を設定（変更）する場合
object.style.paddingLeft = "value";
補足：指定できる値
paddingLeft には、px・em・rem・% など、CSS で有効な長さの単位を文字列として指定できます。また、値を取得する場合は文字列として返されますが、インラインスタイルとして明示的に設定されていない場合は空文字列が返される点に注意してください。
使用例
ここでは、ボタンをクリックすると段落要素の左パディングが追加されるサンプルを紹介します。
<!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 paddingLeft Property Example</h1>
<p>
Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text.
</p>
<button onclick="add()" class="btn">Add padding</button>
<script>
function add() {
document.querySelector('p').style.paddingLeft = "30px";
}
</script>
</body>
</html>実行結果
上記のコードをブラウザで表示すると、次のような画面になります。
「Add padding」ボタンをクリックすると、段落要素（p 要素）の左側にパディングが追加され、テキストが右方向へ押し出される様子を確認できます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri