PR
構文
 
 document.要素.style.margin = "マージンの値"  [DOM属性]
マージンの値
 
  auto | 数値 | 単位付きの数値 | n%
総合 インデックス
プロパティ
FirefoxIE

説明

  •  スタイルシートの上下左右のマージンを値に持つ。後から「margin」属性に値を設定することで,マージンの量を変更することも可能。
  •  スタイルシートでは,「margin」プロパティにあたる。
  •  用例では,ボタンをクリックした時,id名「IMG」を設定したimg要素のマージンの値を変更することで,画像とテキストとのマージンを変更している。

用例

ボタン・フォームをクリックした時「margin」属性に値を設定することにより,id名「IMG」を設定したimg要素のマージンが変わる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>margin</title>
<script type="text/javascript">
<!--
function Img_Margin(VALUE){
    if(document.getElementById){
        document.getElementById("IMG").style.margin=VALUE
    }
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
#IMG { margin: 10px; }
-->
</style>
</head>
<body>
*上下左右のマージン
<hr>
<form>
    <input type="button" value=" auto " onClick="Img_Margin('auto')">
    <input type="button" value=" 50px " onClick="Img_Margin('50px')">
    <input type="button" value=" 5% " onClick="Img_Margin('5%')">
</form>
<hr>
<div id="STY" style="width:500px">
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
<img id="IMG" align="left" src="image.jpg" width="100" height="100"
 alt="margin">
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
</div>
<hr>
</body></html>

この用例を実行する