提问人：CJ Reynolds 提问时间：9/13/2023 最后编辑：CJ Reynolds 更新时间：9/20/2023 访问量：88
如何在 javascript 中访问父元素中的类
How to access a class within a parent element in javascript
问：
查看了“类似问题”列表，找到了一个几乎是我需要的问题，但还不完全是...... 我需要的是修改 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中的类的语法正确。
@Mohamed Mostafa 写道：
var col1Spacers = document.querySelectorAll('#col1 .spacer');
col1Spacers.forEach(function(spacer) {
spacer.style.height = '10px';
});
这看起来很有希望 - 仍然不起作用，但你能澄清一下吗 - 在声明中：
var col1Spacers = document.querySelectorAll('#col1 .spacer');
这会创建一个名为 col1Spacers 的数组吗？
取得进展 - 有一个看起来像奇怪的问题： 我定义了 3 个 querySelectorAll 对象（数组？然后创建这些对象的数组，如下所示：
var col1spacer = document.querySelectorAll('#col1 .spacer');
alert(col1spacer.length);
var col2spacer = document.querySelectorAll('#col2 .spacer');
alert(col2spacer.length);
var col3spacer = document.querySelectorAll('#col3 .spacer');
alert(col3spacer.length);
const columnSpacer = ['col1spacer', 'col2spacer', 'col3spacer'];
alert(columnSpacer[0].length + ', ' + columnSpacer[1].length + ', ' + columnSpacer[2].length);
并隔间长度按预期显示：“11”、“10”和“9”。但是，最后一个警报返回“10、10、10”。我可以在不相等其长度的情况下创建querySelectorAll对象的数组吗？
答：
-1赞
Tayyab AbbaXii
9/14/2023
#1
我们可以在 Vue JS 中使用 :d EEP 语法。从类的父元素访问类。
0赞
Mohamed Mostafa
9/14/2023
#2
你可以使用 querySelectorAll 来获取所有你想要的，如下所示：
// reflects only spacer inside col1
var col1Spacers = document.querySelectorAll('#col1 .spacer');
col1Spacers.forEach(function(spacer) {
spacer.style.height = '10px';
});
评论
0赞
CJ Reynolds
9/15/2023
还在和它搏斗......更新的 OP
0赞
JATIN CHAWDA
9/15/2023
#3
你可以使用这样的东西
var colSpacers = document.querySelectorAll('.spacer');
colSpacers.forEach(e=>{
if(e.parentNode.id == "col1"){
e.style.height = '10px';
}else if(e.parentNode.id == "col2"){
e.style.height = '15px';
}
else{
e.style.height = '20px';
}
})
评论
0赞
CJ Reynolds
9/16/2023
#4
我想出了一个解决方案 - 感谢所有提出建议的人，没有你，我不可能做到这一点！
这样做的原因是将内容的高度均衡为 3 列，使列的底部对齐。我已经制作了一个脚本，可以在特定网页上执行此操作，但我必须使用特定于该页面的编码。我发布了这个问题，以便我可以使脚本更通用，因为我还有其他页面需要使用它。
所以这是我想出的——我经常使用 JS 已经有 15 年了，所以如果它有点草率，请原谅我：
function columnAdjust(){
var col1 = document.getElementById('col1');
var col2 = document.getElementById('col2');
var col3 = document.getElementById('col3');
const columnHeights = [col1.offsetHeight, col2.offsetHeight, col3.offsetHeight];
var largestHeight = Math.max(columnHeights[0], columnHeights[1], columnHeights[2]);
var col1spacer = document.querySelectorAll('#col1 .spacer');
var col2spacer = document.querySelectorAll('#col2 .spacer');
var col3spacer = document.querySelectorAll('#col3 .spacer');
const columnSpacer = [col1spacer, col2spacer, col3spacer];
var i;
for (i = 0; i < columnHeights.length; i++) {
if (columnHeights[i] != largestHeight) {
for (let j = 0; j < columnSpacer[i].length; j++) {
columnSpacer[i][j].style.height = (largestHeight - columnHeights[i]) / (columnSpacer[i].length) + 5 + 'px';
}
}
}
}
当然，我欢迎任何评论/批评/建议。祝大家有美好的一天！
0赞
RoToRa
9/20/2023
#5
在你发布了你自己的解决方案后，我现在想我明白你想做什么了。虽然展示你的代码尝试是好的，但下次试着解释你想要实现的目标。
这可以很容易地在没有 JavaScript 和 CSS 的情况下完成：
.equal-columns {
display: flex;
}
.equal-columns > div {
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 5px;
}
.equal-columns > div > div {
background-color: silver;
}<div class="equal-columns">
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div>
<div>A<br>A</div>
<div>B</div>
<div>C<br>C<br>C</div>
</div>
<div>
<div>A</div>
<div>B<br>B</div>
<div>C</div>
</div>
</div>一些一般性评论：
- 避免使用“间隔”元素。请改用。
margin name在 s 上是没有意义的。div
评论
0赞
CJ Reynolds
9/24/2023
很好的答案！我曾尝试使用带有“table”属性的 CSS，但它没有调整 divs 中内容的高度。这是一个更简洁的解决方案。至于“name”属性，这是一个旧习惯 - 与旧版本的 Firefox 兼容。
评论
querySelectorAll怎么样？