如何在一行javascript代码中做多个css类答案

【问题标题】：How to do mutiple css class in one line javascript code如何在一行javascript代码中做多个css类
【发布时间】：2017-03-22 00:14:42
【问题描述】：

我有 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];

【问题讨论】：

给他们都一样的类名？这将是一个类名的意义吗？元素可以有多个类名......或者只是使用.querySelector()
您可能想更新问题；您似乎在问“如何访问多个类”，而不是如何做/创建。

标签： javascript html css class

【解决方案1】：

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

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

【讨论】：

感谢兄弟以及如何将它们放在共同的行中，例如 (" .exp (1-2-3-4))"
欢迎 :) 。如果您想对所有这些类使用单个选择器，您应该更喜欢使用@Rajesh 的回答中提到的属性选择器 (developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors)。

【解决方案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>

【讨论】：

如果有问题/遗漏，至少要评论。复仇投票永远不会帮助任何人。