style.marginプロパティ

style.marginは、要素のスタイル属性のmarginプロパティの値を取得、もしくは、設定するプロパティ。

marginプロパティは、要素の上下左右のマージン(外側の余白)を一括指定することができる。

構文

取得

var $margin = $elementReference.style.margin;

戻り値

要素のスタイル属性のmarginプロパティの値。

設定

$elementReference.style.margin = "length | percentage | auto | inherit";
length | percentage | auto | inherit
要素のマージンを指定。
下記の何れかの方法で指定する。
  • length:絶対値。「px」や「pt」などの単位を付けた数値で指定。
  • percentage:「%」や「em」を付けた割合で指定。
  • auto:自動。ブロック要素を中央に表示させるときなどに使う。
  • inherit:親要素の設定を継承。

上下左右のマージンを同じ値に指定することもできるし、別々の値に指定することもできる。

設定例

// 上下左右のマージンを「10px」に。
$elementReference.style.margin = "10px";

// 上下のマージンを「10px」、左右のマージンを「20px」に。
$elementReference.style.margin = "10px 20px";

// 上のマージンを「10px」、左右のマージンを「20px」、下のマージンを「30px」に。
$elementReference.style.margin = "10px 20px 30px 40px";

// 上のマージンを「10px」、右のマージンを「20px」、下のマージンを「30px」、左のマージンを「40px」に。
$elementReference.style.margin = "10px 20px 30px 40px";

サンプル

 サンプルボックス要素


変更後のmarginプロパティの値:

サンプルの動作について

  • 「設定(0px)」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを「0px」にし、「変更後のmarginプロパティの値:」の右横に「0px」と表示する。
  • 「設定(10px)」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを「10px」にし、「変更後のmarginプロパティの値:」の右横に「10px」と表示する。
  • 「設定(50px)」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを「50px」にし、「変更後のmarginプロパティの値:」の右横に「50px」と表示する。
  • 「設定(1em)」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを「1em」にし、「変更後のmarginプロパティの値:」の右横に「1em」と表示する。
  • 「設定(10%)」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを「10%」にし、「変更後のmarginプロパティの値:」の右横に「10%」と表示する。
  • 「設定(継承)」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを親要素から継承し、「変更後のmarginプロパティの値:」の右横に「inherit」と表示する。
  • 「設定(10px 20px)」ボタンをクリックすると、「サンプルボックス要素」の上下のマージンを「10px」、左右のマージンを「20px」にし、「変更後のmarginプロパティの値:」の右横に「10px 20px」と表示する。
  • 「設定(10px 20px 30px)」ボタンをクリックすると、「サンプルボックス要素」の上のマージンを「10px」、左右のマージンを「20px」、下のマージンを「30px」にし、「変更後のmarginプロパティの値:」の右横に「10px 20px 30px」と表示する。
  • 「設定(10px 20px 30px 40px)」ボタンをクリックすると、「サンプルボックス要素」の上のマージンを「10px」、右のマージンを「20px」、下のマージンを「30px」、左のマージンを「40px」にし、「変更後のmarginプロパティの値:」の右横に「10px 20px 30px 40px」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setMargin( $margin ) {
 var $elementReference = document.getElementById( "sample" );
 $elementReference.style.margin = $margin;
 var $margin = $elementReference.style.margin;
 document.getElementById( "sampleOutput" ).innerHTML = $margin;
}
</script>

HTML

<div style="border: 1px solid blue; background-color: pink; margin: 18px; width: 400px;">
 <div id="sample" style="border: 1px solid red; background-color: yellow; margin: 18px; height: 200px;">
  サンプルボックス要素
 </div>
</div>
<button onclick="setMargin('0px');">設定(0px)</button>
<button onclick="setMargin('10px');">設定(10px)</button>
<button onclick="setMargin('50px');">設定(50px)</button>
<button onclick="setMargin('1em');">設定(1em)</button>
<button onclick="setMargin('10%');">設定(10%)</button>
<button onclick="setMargin('inherit');">設定(継承)</button>
<br />
<button onclick="setMargin('10px 20px');">設定(10px 20px)</button>
<button onclick="setMargin('10px 20px 30px');">設定(10px 20px 30px)</button>
<button onclick="setMargin('10px 20px 30px 40px');">設定(10px 20px 30px 40px)</button>
<br />
<p>変更後のmarginプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, マージン, リファレンス パーマリンク