Question

我有一个函数的这一部分，它在两个按钮上设置css属性（更新，保存）。我正在尝试最小化代码行，我正在寻找一种更有效的方法来设置多个HTML元素的css属性，而不是为每个元素编写getElementById。 querySelectorAll是否适合在此上下文中使用？

//克里斯

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];
  }

Answer 1

我建议使用以下方法

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与多个选择器一起使用

Answer 2

是的，querySelectorAll可以在这种情况下使用。请注意，IE8或更早版本不支持它。 Check out the MSN docs for some quirks

此外，请注意querySelectorAll返回一个类似于object的数组（非实时NodeList），因此您必须修改代码才能使用这样的结构：

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;
});

Answer 3

使用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');
})

在多个HTML元素上设置CSS属性

3 个答案: