Ajax編程中，經常要能動態改變介面元素的樣式

標籤：style   java   color   使用   width   for   

在Ajax編程中，經常要能動態改變介面元素的樣式，可以通過對象的style屬性來改
變，比如要改變背景色為紅色，可以這樣寫：
element.style.backgroundColor=”#ff0000”;
其中style 對象有很多屬性，基本上CSS 裡擁有的屬性在JavaScript 中都能夠使用。現
在考慮，如果一個函數接收參數，用以指定一個介面元素的樣式，那就需要設計參數的實現
方式，顯然一個或幾個參數是不能符合要求的，下面是一種實現：
function setStyle(_style){
//得到要改變樣式的介面對象
var element=getElement();
element.style=_style;
}
這樣，直接將整個style對象作為參數傳遞了進來，一個style對象可能的形式是：
var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}
這時可以這樣調用函數：
setStyle(style);
或者直接寫為：
setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});
這段代碼看上去沒有任何問題，但實際上，在setStyle 函數內部使用參數_style 為
element.style賦值時，如果element 原先已經有了一定的樣式，例如曾經執行過：
element.style.height=”20px”;
而_style 中卻沒有包括對height 的定義，因此element 的height 樣式就丟失了，不是最
初所要的結果。要解決這個問題，可以用反射機制來重寫setStyle函數：
function setStyle(_style){
//得到要改變樣式的介面對象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
}
}
程式中遍曆_style 的每個屬性，得到屬性名稱，然後再使用方括弧文法將element.style
中的對應的屬性賦值為_style 中的相應屬性的值。從而，element 中僅改變指定的樣式，而
其他樣式不會改變，得到了所要的結果。