通過'document.getElementById（o）.style [p] = v'valid改變css風格嗎？

Question

我們希望能修整我們在我們的產品中使用的定製庫中的一些脂肪。

一個常用的操作是更改對象樣式。

通常情況下，我們做到這一點通過：

document.getElementById('object').style.property='value'; 

我剛剛測試了以下的鉻合金控制檯，它的工作：

function objStyle(o,p,v){ 
    document.getElementById(o).style[p]=v; 
} 

objStyle('object','property','value'); 

這是做事情的有效途徑？

使用這種做事方式時可以想到的任何缺陷？ Crossbrowser兼容性？

Answer 1

是的，這是完全有效的。您訪問.name的房產也可以通過['name']訪問。

，在任何對象的任何屬性的作品，例如：

window['alert']('Hello world.'); 

document['getElementById']('object')['style']['color'] = '#fff'; 

Answer 2

你的代碼是正確的。

我想考慮的一件事是，如果您需要對同一元素執行多個更改，是否要繼續調用document.getElementById()（在函數內部）。爲了向你展示更多的選擇，我要提出的是過度殺毒，但考慮到你可以將Id傳遞給你的函數，或者直接傳遞對元素的引用，或者有一個接受字符串或元素的函數參考並從參數類型中計算出來：

function objStyleById(oId,p,v){ 
    document.getElementById(oId).style[p]=v; 
} 

function objStyle(o,p,v) { 
    o.style[p] = v; 
} 

function objStyleAuto(o,p,v) { 
    if (typeof o === "string") 
     o = document.getElementById("o"); 
    // else not a string so assume o is element reference 
    o.style[p] = v; 
} 

objStyleById('object','property','value'); 

var myEl = document.getElementById("someElement"); 
objStyle(myEl,"prop","val"); 
objStyle(myEl,"prop2","val"); 
// some other non-style operation on myEl, e.g., 
myEl.className = "something"; 
myEl.innerHTML = "something"; 
objStyle(myEl.parentNode,"prop","value"); 

objStyleAuto('object','property','value'); 
objStyleAuto(myEl,'property','value');