原文︰http://msdn.microsoft.com/en-us/library/ms537634%28VS.85%29.aspx
自IE8起，dynamic properties就被禁止，只有在IE5、IE7模式可以使用。IE5提供了一個新功能，讓web開發者能廣泛的增進頁面的渲染效果。使用dynamic properties，現在能定義CSS不再只是一個定值，還能是一個算式。這個算式還能引入其它元素的值，因而讓開發更具有靈活性。
註︰Dynamic properties（CSS Expression）已經不被IE8或以後的瀏覽器支持。這個決定是為了遵從標準化原則、瀏覽器性能、並一些安全因素，像IE Blog的入口標題Ending Expression。Dynamic properties在IE8的IE5、IE7模式仍是可用的。（更多關於兼容模式，看Defining Document Compatibility）因為IE8是完全依從CSS2.1的規格，且大多數的dynamic properties是為了舊版本IE的CSS缺失做修正。而dynamic properties普遍的都能用標準的JavaScript代替。
使用dynamic properties可以做到一些特殊的事情︰
- ．製作一個表格讓使用者輸入值時可以自動加總
- ．讓元素跟隨鼠標
- ．讓元素隨時間移動
dynamic properties的好處
dynamic properties很容易，很短，不佔體積。開發人員可以用dynamic properties完成以前需要使用script來做的事情。這讓作者不再需要學習script來修飾他的頁面。
Dynamic properties寫起來就像寫Excel公式。每一格都可以是一個公式或一個值；每個公式都可以使用其它格子內的資料。同樣的，dynamic properties也可以使用同一個頁面下任何物件的任何資料。
Dynamic properties讓開發者用函式就能在物件、數值、變數之間做連結；而不是設一個固定不變的方法。開發者只要專注於函式的撰寫，不需要關心物件目前的狀態。
事件的綁定很複雜而且效率很差。綁定一個事件在還未知內容頁面上（例如，使用資料庫的頁面或數據未知的）只能用event bubbling。結果呢，開發者常常就綁定事件在最高層的物件上，來偵測、修改、更新。另一方面，用dynamic properties，使用者可以自動的、最少的、最理想的去計算值，且在真的有需要時才重新計算。
使用Dynamic Properties
Dynamic properties可以用四個方法引入。
- ．getExpression方法會傳回目前的Dynamic properties公式。
- ．recalc方法讓開發者能重新計算公式。
- ．removeExpression方法可以清除以setExpression建立的公式。
- ．setExpression方法能明確指定一個式子。
Dynamic Properties公式可以在script中用setExpression方法設定。它們也可以做為一個行內的值、表達式，放置在style標籤或style屬性中。
例如，Dynamic HTML(DHTML)可以將物件依據自己與其它物件的位置，做計算後定位。下面的例子可以達到水平和垂直置中的效果︰
水平置中︰
object.style.left=(document.body.clientWidth/2) - (object.offsetWidth/2);
垂直置中︰
object.style.top=(document.body.clientHeight/2) - (object.offsetHeight/2);
物件定位以後，在流動布局中，當容器的寬高改變，位置也會改變。下述的範例中，Dynamic properties預防了開發者每當寬高改變，就要去更新位置。在IE5之前，開發者需要使用一個onresize事件來捕捉長寬的變動並重新計算物件的位置。注意式子是一樣的，但以表達式使用。
下面的範例顯示如何在行內套用表達式︰
<DIV ID="oDiv"
STYLE="background-color: #CFCFCF; position: absolute;
left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)"
>
Example DIV
</DIV>
下面的範例顯示如何用setExpression方法設定表達式︰
<SCRIPT>
window.onload=fnInit;
function fnInit(){
oDiv.style.setExpression("left",
"document.body.clientWidth/2 - oDiv.offsetWidth/2"
);
oDiv.style.setExpression("top",
"document.body.clientHeight/2 - oDiv.offsetHeight/2"
);
document.recalc(true);
}
</SCRIPT>
<DIV ID="oDiv"
STYLE="background-color: #CFCFCF; position: absolute; top: 0; left: 0;"
>
Example DIV
</DIV>
註︰在一些早期的IE版本，style物件並不會在使用setExpression或removeExpression後更新，直到recalc方法被呼叫。為了向後兼容，在修改一個表達式後，都呼叫一次recalc。
在某些情況，當一個關鍵的物件移動到新的位置時，需要很多額外的script用來做一些新的計算。這很容易就能從各個物件的位置關係觀察出來。
例，如果有四個div圍繞在第五個div周圍，位於螢幕中央，且可被使用者移動，那麼更新周圍的四個div的位置就很費時。另外，若外圍的div的屬性又能被使用者修改，作者就需要經常的監聽屬性的值來隨時更新位置。或，你也可以用expression讓它更簡單。
下面的範例代碼顯示出expression如何與script合用來測量其它的物件︰
<STYLE>
.block {position: absolute; top: 100; left: 100; height: 75; width: 75;}
.block2 {position: absolute; top: 0; left: 0; height: 25; width: 25;}
</STYLE>
<SCRIPT>
window.onload=fnInit;
var iOffset=10;
function fnInit(){
oDiv.style.left=document.body.clientWidth/2 - oDiv.offsetWidth/2;
oDiv.style.top=document.body.clientHeight/2 - oDiv.offsetHeight/2;
oBlock1.style.setExpression("top","
(oDiv.style.pixelTop - iOffset
- oBlock1.style.pixelHeight)
");
oBlock1.style.setExpression("left","
(oDiv.style.pixelLeft +
(oDiv.style.pixelWidth/2 - oBlock1.style.pixelWidth/2))
");
}
</SCRIPT>
<DIV ID="oDiv" CLASS="block"></DIV>
<DIV ID="oBlock1" CLASS="block2"></DIV>
一個dynamic properties可以是任何合法的JScript、VBScript陳述句。setExpression的第三個參數可以是第二個參數script陳述句的語言，預設是JScript。至於行內的expression，就只能用JScript。當重新計算expression時，頁面上實際的值會決定字串內的標示符。
傳入setExpression的參數會先經過一個scripting language engine。當你要指定一個字串傳給setExpression，將字串用單引號包起來。單引號會強制把參數當字串計算。例如，下面的範例並沒有真的把背景色設成紅色，而是把CSS值設成"red"這個變數內的值。
object.style.setExpression("backgroundColor","red");object.style.setExpression("backgroundColor","'red'");Dynamic properties可以用getExpression和removeExpression方法來檢視、移除它。getExpression會傳回一個variant變量，包含expression式子。在使用getExpression時，expresion會先被重新計算。使用removeExpression，可以把它清空。removeExpression函式是唯一能移除以setExpression創造的式子的方法。當expression被移除後，CSS值就會變成expression最後計算出來的值，並會傳回一個Boolean值表示是否移除成功。
recalc方法是用來重新計算頁面上expression的值。這個函式很有用，因為expression只會在物件和值被申報時更新。呼叫recalc並傳入參數false（預設），會重新計算整個頁面的所有expression，所使用的值與上次計算時不同。呼叫recalc(true)會重新計算所有的expression，不管它所使用的值有沒有改變。dynamic properties重新計算後，引用它值的物件，會重新得到它的值。
下面的範例說明recalc方法如何重新計算飛行物件的值。
關於隱式依賴關係
隱式依賴關係參考的值，可能會因為其它CSS值而改變。比如，offsetWidth決定於CSS中的width值，甚至可能會被height值影響。
大部份的情況，作者可以不用去擔心這些依賴關係；IE5能自動處理這些情況。它會把確定的CSS值映射到一個canonical上，來追蹤是否有依賴關係。比如，全部的寬度的canonical是offsetWidth。一個依賴clientWidth, width, posWidth, pixelWidth, currentStyle.width或是圖片的寬，對offsetWidth都有依賴性。
雖然IE會自行處理大部份常見的依賴性問題，但還是有些是非常難以理解的。因為實際上，值改變時仍會產生一個事件，expression引擎就知道要重算。然而，若expression是一個循環，其中用到的變量是運行時產生的，很有可能最常見的一個例子就是clientHeight的運算。一個clientHight的運算，要依賴innerHTML、margin、padding、當然還有width。
……其實只是測試靈格斯（逃）
沒有留言:
張貼留言