在js中访问像css`tag [class * =“samepart-”]`这样的html类[重复]答案

【问题标题】：access html classes like css `tag[class*="samepart-"]` in js [duplicate]在js中访问像css`tag [class * =“samepart-”]`这样的html类[重复]
【发布时间】：2018-04-16 23:08:28
【问题描述】：

所以我有这个 css：

tag[class*="samepart-"] {
  /* css code for all html classes with "samepart-" in their class name */
}

有了这个 html：

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

现在我想在 JS 中获取所有带有“samepart-”的 html 类，而不需要在“samepart-”类中添加额外的 html 类。

这是我尝试过的：

const htmlClasses1 = document.getElementsByClassName("samepart-");
console.log(htmlClasses1[0]);

const htmlClasses2 = document.getElementsByClassName('*["samepart-"]');
console.log(htmlClasses2[0]);

const htmlClasses3 = document.getElementsByClassName('[class*="samepart-"]');
console.log(htmlClasses3[0]);

const htmlClasses4 = document.getElementsByClassName(["samepart-"]);
console.log(htmlClasses4[0]);

div[class*="samepart-"] {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #00F;
  color: #0FF;
}

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

【问题讨论】：

getElementsByClassName([class^='samepart-']

标签： javascript html css

【解决方案1】：

使用querySelectorAll()：

PS：我将*= 编辑为^=，因为您似乎只想要以samepart 开头的课程。

const htmlClasses = document.querySelectorAll("div[class^='samepart-']");
console.log(htmlClasses);

div[class*="samepart-"] {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #00F;
  color: #0FF;
}

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

【讨论】：

你能解释一下*=和^=之间的区别吗？
它只选择属性 starting 与接下来的内容，而不是 * 只检查属性是否包含接下来的内容。
那么这对 css 也同样有效吗？那会很好。
确实如此。

【解决方案2】：

试试document.querySelectorAll('[class*="samepart-"]')

console.log(document.querySelectorAll('[class*="samepart-"]'))

<div class="samepart-a">some html a</div>
<div class="samepart-b">some html b</div>
<div class="samepart-c">some html c</div>

【讨论】：