如何使用度量單位和位置屬性
度量單位和位置值不一定要是靜態整數。它們可以是根據其他元素之間距和尺寸、表示之長度 (如同在更傳統的媒體中) 或方程式的指令碼值。在使用多個元素時，您可以使用其中一個元素的度量單位來設定其他元素的位置。
您可以使用本概觀中討論的度量單位和位置屬性來建構更複雜的產物。例如，若要將元素置於其容器中央，請將其左側座標設為其容器寬度一半的總和減去元素寬度的一半。下列範例示範其語法。
<script>
function center(oNode){
var oParent=oNode.parentElement;
oNode.style.left=oParent.offsetWidth/2 - oNode.offsetWidth/2;
}
</script>
<div id="odiv"
onclick="center(this)"
style="position: absolute;">
Click Here To Center
</div>
雖然 DHTML DOM 提供取得元素目前尺寸與位置的簡單方式，但在大多數情況中，您必須使用階層式樣式表來設定這些值。除了公開 height 和 width 屬性 (Property) 的元素 (例如 img 和 table ) 之外，您可以使用各種階層式樣式表屬性 (Attribute) 來設定元素的大小。雖然許多屬性會以像素為單位傳回值，但您可以使用某些具有特定 長度單位 (例如英吋或公分) 的階層式樣式表屬性。
下列範例會在使用者每次按下 H1 元素時，將 H1 元素移動 1 英吋：
<script>
function moveMe(){
// Move the object by one inch.
oHeader.style.posLeft+=1;
oHeader.style.posTop+=1;
}
</script>
<h1 id="oHeader"
style="position: absolute; top: 1in; left: 1in;"
onclick="moveMe()">
Header
</h1>
在將元素移至文件中特定位置時，有時必須考量方塊元素的不同屬性。 height 和 width 屬性的值包含 border 和 padding 度量單位。使用位移屬性和上述範例中說明的方法，將一個元素移至另一個元素的可見邊角，是相當容易的。不過，在將元素放置在另一個定位元素內容中的特定點時，則必須包含 padding 和 border 的大小。您可以使用用戶端屬性或 padding 和 border 屬性來建立元素內容內的位置。
下列範例顯示將一個元素置於另一個元素內容中的三種不同方式。首先，使用階層式樣式表 border 和 padding 屬性，將元素移至定位元素內的內容。接著，使用 DHTML 位移和用戶端屬性，在忽略邊框間距的情況下，將元素移至定位元素的內容中。
<script>
function fnMove1(){
// Method 1: Use only CSS properties
var iTop1=odiv.style.pixelTop +
parseInt(odiv.style.border-top-width) +
parseInt(odiv.style.paddingTop);
var iLeft1=odiv.style.pixelLeft +
parseInt(odiv.style.border-left-width) +
parseInt(odiv.style.padding-left);
oMarker.style.top=iTop1;
oMarker.style.left=iLeft1;
}
function fnMove2(){
// Method 2: Use DHTML properties.
var iTop2=odiv.offsetTop + odiv.clientTop;
var iLeft2=odiv.offsetLeft + odiv.clientLeft;
oMarker.style.top=iTop2;
oMarker.style.left=iLeft2;
}
function fnMove3(){
// Method 3: Use DHTML, CSS, and a TextRectangle.
var aRects=odiv.getClientRects();
var oRect=aRects[0];
var oBnd=odiv.getBoundingClientRect();
oMarker.style.top=oBnd.top +
parseInt(odiv.style.paddingTop) +
parseInt(odiv.style.border Top);
oMarker.style.left=oBnd.left +
parseInt(odiv.style.padding-left) +
parseInt(odiv.style.border-left);;
}
</script>
<div id="odiv" style="position: absolute; top: 150px;
left: 50px; border: 10px outset; padding: 10px;
width: 250px; height: 250px; background-color: #EFEFEF;">
Move marker here.
</div>
<span id="oMarker" style="top: 200px; left: 200px;
position: absolute; border: 2px outset;
background-color: #CFCFCF;">
Marker
</span>
<input type="button" value ="CSS" onclick="fnMove1()">
<input type="button" value ="DHTML" onclick="fnMove2()">
<input type="button" value ="TextRectangle" onclick="fnMove3()">