如何在 javascript 中访问父元素中的类

Question

查看“类似问题”列表，发现一个几乎是我需要的，但不完全是...... 我需要的是修改 3 个不同元素内的类的属性。

感谢您的意见，大卫 - 这是更完整的概述：

HTML：

<div id="col1" name="col1">
  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>
</div>

<div id="col2" name="col2">
  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>
</div>

如果我使用CSS，它会看起来像：

#col1 .spacer{
  height:10px;
}

#col2 .spacer{
  height:15px;
}
etc...

但我想使用 JS 动态控制类

我熟悉 document.getElementById 和 document.getElementsByClassName，但似乎无法获得正确的语法来访问每个 ID 中的类。

Answer 1

我们可以在 vue js 中使用 :deep 语法。从其父元素访问类。

Answer 2

您可以使用 querySelectorAll 来获取您想要的所有内容，如下所示：

 // reflects only spacer inside col1 
var col1Spacers = document.querySelectorAll('#col1 .spacer');
col1Spacers.forEach(function(spacer) {
spacer.style.height = '10px';
});