在多个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属性

回答

相关问题