快速模式下的度量單位基礎
高度和寬度是最常用的度量單位。若要設定這些度量單位，請使用 height 和 width 屬性 (Attribute) (或相關的屬性 (Property))。
已設定高度或寬度時，內嵌元素會取得版面配置。具有版面配置的內嵌元素會公開與區塊元素相同的版面配置屬性，例如框線、邊界和邊框間距。下列範例顯示，當設定元素的 height 屬性 (Property) 時，版面配置屬性 (Attribute) 如何影響網頁外觀：
<!-- Styles render because this link has layout. -->
<a href="https://msdn.microsoft.com/" style="width: 150px;
border: 1px solid; padding: 10px; margin: 5px;">MSDN Online</a>
<!-- Styles do not render because this link has no layout. -->
<a href="https://msdn.microsoft.com/" style="border: 1 solid; padding: 10px; margin: 5px;">MSDN Online</a>
絕對和相對長度單位
在設定或擷取元素的度量單位和位置值時，可以使用不同的長度單位來達成特殊樣式。使用一致的長度單位可簡化度量單位和位置值。若混合不同的長度單位，需要根據每個系統的相對單位，以程式設計方式決定絕對長度單位的值。例如，您將必須在呈現文件的每一部機器上，將英吋轉換為像素。
版面配置屬性會計入元素的尺寸，並且應該在決定內容的尺寸時加以考量。元素內容的大小為任何指定度量單位減去框線和邊框間距度量單位。因為在內容沒有邊框間距的情況下，DHTML 與階層式樣式表屬性不提供內容的度量單位，邊框間距屬性必須明確查詢以便擷取準確的度量單位。雖然可以使用位移和用戶端屬性來判斷內容大小，但是比較簡單的方式是從元素寬度減去框線和邊框間距屬性的大小。
以下列 DIV 元素為例：
<div id="odiv" style="padding: 10px; width: 250px;
height: 250px; border: 2px outset; background-color: #CFCFCF;">
</div>
上述 DIV 元素的指定高度和寬度為 250 像素。內容的寬度可以用下列公式表示：
odiv.style.width - odiv.style.border Width - odiv.style.padding
不過，由於這三個屬性都會傳回變數資料類型，因此必須將值轉換為整數，或使用會傳回整數值的屬性。例如，若要取得以像素為單位的元素寬度，您可以在 Jscript 使用下列其中一種方法：
var iWidth = odiv.style.pixelWidth
var iWidth = parseInt(odiv.style.width)
(width is specified in pixels)
var iWidth = odiv.offsetWidth
如果框線和邊框間距屬性的值是與寬度屬性一樣用相同長度單位來設定，您可以將變數值轉換為整數。若要判斷內容尺寸，請使用 border 和 padding 屬性及元素尺寸。在擷取框線與邊框間距值時，如果元素各邊的值是一致的，請使用 border-width 和 padding 屬性。否則，您必須明確查詢 border-left-width、border-right-width、padding-left 及 padding-right 屬性，以取得準確的度量單位。
例如，若要取得以像素為單位的內容寬度，您可以在 Jscript 中使用下列其中一種方法，其中 iWidth 是從前面其中一種範例方法計算得出。
如果所有邊的框線和邊框間距大小不一致，請使用此公式：
var iCntWidth = (iWidth - parseInt(odiv.style.border-left-width) parseInt(odiv.style.border-right-width) - parseInt(odiv.style.padding-left) - parseInt(odiv.style.padding-right) )如果所有邊的框線和邊框間距大小一致，請使用此公式：
var iCntWidth = (iWidth - parseInt(odiv.style.border Width) parseInt(odiv.style.padding) )請使用這個公式，而不使用框線屬性：
var iCntWidth = (iWidth - (odiv.offsetWidth - odiv.clientWidth) parseInt(odiv.style.padding) )
.gif "Note") 注意： |
|---|
如果使用百分比來指定邊框間距或邊界值，這些公式將無法運作。 |
度量單位範例
下列範例使用上一節的第一個公式，根據另一個元素的內容來移動和調整定位元素的大小。
<script>
window.onload=fnInit;
function fnInit(){
var iWidth=odiv.style.pixelWidth;
var iHeight=odiv.style.pixelHeight;
var iCntWidth=(iWidth - parseInt(odiv.style.border-left-width)
- parseInt(odiv.style.border-right-width)
- parseInt(odiv.style.padding-left)
- parseInt(odiv.style.padding-right));
var iCntHeight=(iHeight - parseInt(odiv.style.border-top-width)
- parseInt(odiv.style.border-bottom-width)
- parseInt(odiv.style.paddingTop)
- parseInt(odiv.style.paddingBottom));
var iTop=odiv.offsetTop + parseInt(odiv.style.border Top)
+ parseInt(odiv.style.paddingTop);
var iLeft=odiv.offsetLeft + parseInt(odiv.style.border-left)
+ parseInt(odiv.style.padding-left);
odiv2.style.width=iCntWidth;
odiv2.style.height=iCntHeight;
odiv2.style.top=iTop;
odiv2.style.left=iLeft;
}
</script>
<div id="odiv" style="padding: 20px 5px 10px 10px;
width: 250px; height: 250px; border: 10px outset;
background-color: #CFCFCF;">
</div>
<div id="odiv2" style="position: absolute; border: 2 inset; background-color: #000099;">
</div>