如何在一行javascript代码中执行多个css类

Question

我有css类名- .exp-1，.exp-2，.exp-3，exp-4 .那么有什么简单的方法可以用类似行的方式来写这些，比如，我是javascript的初学者

document.getElementsByClassName("exp-1")[0];
document.getElementsByClassName("exp-2")[0];
document.getElementsByClassName("exp-3")[0];
document.getElementsByClassName("exp-4")[0];

至

 document.getElementsByClassName("exp-1,exp-2,exp-3, exp-4")[0];

Answer 1

您可以使用querySelector，然后像选择器一样使用css。它返回所有选定元素的第一个元素。如果您想返回所有您可以使用的querySelectorAll

 document.querySelector(".exp-1,.exp-2,.exp-3,.exp-4");

Answer 2

您可以使用starts with选择器。

document.querySelectorAll('[class^=exp-]')

示例

​

Array.from(document.querySelectorAll('[class^=t]'), function(el) {
  console.log(el.innerHTML)
})

<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>

​