在多個HTML元素上設置CSS屬性

我有設置兩個按鈕（更新，保存）的css屬性的函數的這一部分。我試圖儘量減少代碼行，我正在尋找一種更有效的方法來設置多個HTML元素的css屬性，而不是爲每個元素編寫getElementById。 querySelectorAll適合在此上下文中使用嗎？在多個HTML元素上設置CSS屬性

//克里斯

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 
    for (var prop in css) { 
    document.getElementById("update").style[prop] = css[prop]; 
    document.getElementById("save").style[prop] = css[prop]; 
    }

來源

2017-03-06 koffe14

'.style'後應該有一個點。 –

是的，querySelectorAll適合在這種情況下使用。 – Pineda

querySelectorAll適合使用，但要設置樣式，您將不得不迭代查詢的結果併爲數組中的每個元素設置樣式 – Andrey

是，querySelectorAll可以在這個環境中使用。請注意，它在IE8或更早版本中不受支持。 Check out the MSN docs for some quirks。

此外，要知道，querySelectorAll返回類似對象數組（非活的節點列表），所以你必須修改代碼具有這種結構的工作：

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 

var matched = document.querySelectorAll("#update, #save"); 
matched.forEach(function (c){ 
    c.style.backgroundColor css.backgroundColor; 
    c.style.textDecoration = css.textDecoration; 
});

來源

2017-03-06 12:22:46 Pineda

感謝您提供豐富的答案，也感謝您注意兼容性問題。幸運的是，只有IE10或更高版本的用戶纔會受此影響。我會嘗試類似的東西 – koffe14

很高興你發現我的答案有用:-) – Pineda

我建議以下方法

var css = {"backgroundColor": "red","textDecoration": "line-through"}; 
var elements = document.querySelectorAll('#update, #save'); 
for (var prop in css) { 
    elements.forEach(function (element) { 
     element.style[prop] = css[prop]; 
    }); 
}

這裏querySelectorAll用於與多個選擇

來源

2017-03-06 12:21:36

使用document.querySelectorAll你可以這樣做。

/*declare a css class*/ 

.button-css{"backgroundColor": "red","textDecoration": "line-through"}; 

/*in javascript you can do the following*/ 
var buttons=document.querySelectorAll(".buttons"); 

buttons.forEach(function(button){ 
    button.classList.add('button-css'); 
})

來源

2017-03-06 12:23:35 CrownedClown

在多個HTML元素上設置CSS屬性

回答

相關問題