# 快速模式下的度量單位基礎

``````<!-- Styles render because this link has layout. -->
<a href="http://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="http://msdn.microsoft.com/" style="border: 1 solid; padding: 10px; margin: 5px;">MSDN Online</a>
``````

## 絕對和相對長度單位

``````<div id="odiv" style="padding: 10px; width: 250px;
height: 250px; border: 2px outset; background-color: #CFCFCF;">
</div>
``````

``````odiv.style.width - odiv.style.border Width - odiv.style.padding
``````

``````var iWidth = odiv.style.pixelWidth
var iWidth = parseInt(odiv.style.width)
(width is specified in pixels)
var iWidth = odiv.offsetWidth
``````

• 如果所有邊的框線和邊框間距大小不一致，請使用此公式：

``````var iCntWidth = (iWidth - parseInt(odiv.style.border-left-width)
parseInt(odiv.style.border-right-width)
)
``````
• 如果所有邊的框線和邊框間距大小一致，請使用此公式：

``````var iCntWidth = (iWidth - parseInt(odiv.style.border Width)
)
``````
• 請使用這個公式，而不使用框線屬性：

``````var iCntWidth = (iWidth - (odiv.offsetWidth - odiv.clientWidth)
)
``````

## 度量單位範例

``````<script>
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)
var iCntHeight=(iHeight - parseInt(odiv.style.border-top-width)
- parseInt(odiv.style.border-bottom-width)
var iTop=odiv.offsetTop + parseInt(odiv.style.border Top)
var iLeft=odiv.offsetLeft + parseInt(odiv.style.border-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>
``````