Question

我有很多css类如何工作所有

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="B3">sgddsg</div>
<div class="B5">dsgdsg</div>
<script>
var nam = document.querySelector('.B3,.B5');
nam.style.width = '100px';
nam.style.height = '100px';
nam.style.backgroundColor = 'blue';
nam.style.color = 'white';

</script>
</body>
</html>

此处B3类正在运行，但B5不是为什么在一行代码中有任何解决方案。

Answer 1

querySelector返回与选择器匹配的第一个元素。如果您想要返回所有元素，则需要querySelectorAll。

querySelectorAll不会返回单个元素，因此您将need to deal with that。

Answer 2

querySelector仅返回第一个匹配元素。

如果您想匹配多个元素，则需要使用querySelectorAll，然后迭代结果：

＆＃13;

var nam = document.querySelectorAll('.B3,.B5');

for (var i = 0; i < nam.length; i++) {
  var elem = nam[i];
  elem.style.width = '100px';
  elem.style.height = '100px';
  elem.style.backgroundColor = 'blue';
  elem.style.color = 'white';
};

＆＃13;

<div class="B3">sgddsg</div>
<div class="B5">dsgdsg</div>

＆＃13;

为什么查询选择器不适用于第二类

2 个答案: