Question

我尝试编写一个简单的javascript函数，其中包含默认选项。调用函数时，这些应该是可自定义的。

我的代码不起作用。这是问题吗？

var options = [{
  selector: '.test',
  color: '#c3c3c3'
}]

document.querySelectorAll(options.selector).style.backgroundColor = options.color

JSBIN DEMO

Answer 1

options是一个对象数组。您应该像options[index].property：

一样访问它

var options = [{
  selector: '.test',
  color: '#c3c3c3'
}];

document.querySelectorAll(options[0].selector)[0].style.backgroundColor = options[0].color;

如果您只关心一个一组默认选项，则可以改为使用单个对象：

var options = {
  selector: '.test',
  color: '#c3c3c3'
};

最后，querySelectorAll(...)返回一个数组，因此您还必须使用括号（querySelectorAll(...)[index]）访问它：

＆＃13;

document.addEventListener("DOMContentLoaded", function(event) { 
  
  var options = [{
    selector: '#test'
  }];

  document.querySelectorAll(options[0].selector)[0].style.display = 'none';

});

＆＃13;

<div id="test">
  This should be hidden
</div>

＆＃13;

Answer 2

有几个问题：

＆＃34;选择＆＃34;在你的代码中是一个数组，这没有多大意义。我已将其更改为单个对象，没有数组。

此外，document.querySelectorAll返回元素列表。列表没有＆＃34;样式＆＃34;属性，但列表中的元素。因此，您必须遍历它们才能对每个进行更改：

＆＃13;

document.addEventListener("DOMContentLoaded", function(event) {

  var options = {
    selector: '.test',
    color: '#c3c3c3'
  };

  document.querySelectorAll(options.selector).forEach(function(element) {
    element.style.backgroundColor = options.color;
  });

});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div class="test">
    This should be #c3c3c3
  </div>
  <div class="test">
    This should be #c3c3c3
  </div>
  <div class="test">
    This should be #c3c3c3
  </div>
  <div class="test">
    This should be #c3c3c3
  </div>
</body>

</html>

＆＃13;

如评论中所述，并非所有浏览器都支持在nodeList上使用每个（由querySelectorAll返回）。在这种情况下，您可以使用标准for循环轻松替换它，如下所示：

var elements = document.querySelectorAll(options.selector);
for (var i = 0; i < elements.length; ++i) {
  elements[i].style.backgroundColor = options.color;
}

Answer 3

您可能希望一次更改一个选项的颜色。 querySelectorAll返回一个数组。所以你也想循环遍历那个函数的结果。

var options = [{
  selector: '.test',
  color: '#c3c3c3'
}];

options.forEach(o => {
  var domElements = document.querySelectorAll(o.selector);
  domElements.forEach(d => d.style.backgroundColor = o.color);
});

如何使用options数组选择div？

3 个答案: