HTMLDOMスタイルのpaddingRightプロパティ
HTML DOMスタイルのpaddingRightプロパティは、HTML要素に右パディングを返し、追加します。
構文
以下は構文です-
1.パディングを返すRight
object.style.paddingRight
2. paddingRight
を追加しますobject.style.paddingRight=”value”
ここでは、「値 」は次のようになります-
| 値 | 詳細 |
|---|---|
| 長さ | 長さの単位で値のパディングを定義します。 |
| 初期 | パディングをデフォルト値に定義します。 |
| 継承 | このパディングでは、親要素から継承されます。 |
| パーセンテージ（％） | 親要素の幅のパーセンテージでパディングを定義します。 |
HTMLDOMスタイルの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> 出力
[パディングを追加]ボタンをクリックして、赤いボックス内にパディングを追加します。
-
HTMLDOMスタイルtransformStyleプロパティ
HTML DOMスタイルのtransformStyleプロパティは、2Dまたは3D変換を返し、HTMLドキュメントの要素に適用します。 構文 以下は構文です- transformStyleを返す object.style.transformStyle transformStyleの変更 object.style.transformStyle = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 フラット 3D位置を保
-
HTMLDOMスタイルのpaddingTopプロパティ
DOMのpaddingTopプロパティは、HTMLの要素の上部のパディングを設定するために使用されます。要素の境界内にスペースを挿入することを忘れないでください。また、上部のパディングを返すためにも使用されます。デフォルト値は0です。 構文 以下は構文です- 上部のパディングを返す構文 object.style.paddingTop 上部のパディングを設定する構文 object.style.paddingTop = "%|length|initial|inherit" ここで、％は上部のパディング、長さ 長さ（単位）の一番上のパディング、初期 プロパティをデフォ