HTML DOMスタイルmarginプロパティ
スタイルオブジェクト 定義と使用法
外部の要素からマージンプロパティセットや戻ります。
このプロパティは、値の1-4種類を使用することができます。
- あなたが値を指定すると、例えば：div要素{マージン：は50px} - すべての4つのマージンはは50pxです。
- 両方の値が指定されている場合、例えば：DIV {マージン：は50px 10pxの} - マージンと下マージン左マージンと右マージンが10pxのある、は50pxです。
- あなたは3の値を指定した場合、例えば：DIV {マージン：は50px 10pxの20ピクセルが} - マージンはは50pxで、左マージンと右マージンが10pxのですが、下のマージンは20ピクセルです。
- DIV：あなたのような値の4種類、指定した場合は{マージンを：は50px 10pxの20ピクセル30px} - マージンは50px、右マージンが10pxのである、下マージンは20ピクセルで、左マージンが30pxです。
文法
マージンプロパティを設定します。
Object.style.margin="%|length|auto|inherit"
マージンプロパティを返します：
Object.style.margin
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比外边距。 |
| length | 使用 px、cm 等单位定义外边距的宽度。 |
| auto | 浏览器设定的外边距（所有四个外边距是相等的）。 |
| inherit | 外边距从父元素继承。 |
ブラウザのサポート
すべての主要なブラウザは、マージンのプロパティをサポートしています。
注：IE7およびそれ以前のバージョンは、「継承」の値をサポートしていません。IE8は、唯一の "継承"サポート！のDOCTYPEを提供します。 IE9のサポート「継承」。
ヒントと注意事項
マージン特性及びパディング特性は、要素の周囲の空間に挿入されます。 しかし、違いは、マージンは要素の境界線内の境界線の外側、パディングを挿入空間の周囲の空間に挿入されますされています。
例
例
変更マージンdiv要素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
»をお試しください
スタイルオブジェクト