Question

我目前在HTML文件中有一个类，该类设置为在我的外部CSS文件中隐藏。该类的标题为“ a”。

在我的CSS文件中，我已经这样做了：

.a{
    display: none;
}

在我的外部Javscript文件中，我想取消隐藏此类。我该怎么做？我目前尝试了以下方法：

document.getElementsByClassName('a').style.visibility = visible/block;

但这没用。

谢谢。

Answer 1

getElementsByClassName返回一个HTMLCollection。要修改元素的样式，您需要指定哪个元素。

在您的情况下，您正在样式表中使用display样式，但是您尝试使用visibility样式来扭转这种情况。这些是具有不同用途的相似样式。

visibility: hidden将隐藏具有a类的元素，但在将其兄弟元素设置为visibility: visibile时不会移动其同级元素。

display: none将使用a类隐藏该元素，并且当其样式设置为block时，其兄弟姐妹将移开。

如果您想保留a类元素的位置，则应将样式表更改为visibility: hidden并用以下方式取消隐藏：

document.getElementsByClassName('a')[0].style.visibility = 'visibile';

如果您希望保留当前的样式表，可以使用以下方法取消隐藏它：

document.getElementsByClassName('a')[0].style.display = 'block';

如果该类中有多个元素，并且您想一次取消隐藏所有元素，this answer应该使您通过遍历HTMLCollection取消隐藏所有元素。

Answer 2

对于一个visible/block来说，对于display或visibility来说都不是有效的属性值。在CSS中，您使用display，而在JS中，您使用visibility，因此您不会覆盖CSS。

还要注意，document.getElementsByClassName('a')不会像getElementById那样仅返回一项。

看看下面的例子，看看它是如何工作的。

const as = document.getElementsByClassName('a');
const trigger = document.getElementById('trigger');

trigger.addEventListener('click', () => {
  for( let a of as) 
  {
    a.style.display = 'block';
  }
});

.a {
  display: none;
}

<div class="a">
  Block A
</div>

<div class="a">
  Block B
</div>

<div class="a">
  Block C
</div>

<button id="trigger">Show A</button>

以上示例适用于多个class="a"元素，但是如果您不希望将for循环替换为：

as[0].style.display = 'block';

您还可以通过以下操作隐藏和取消隐藏元素：

if(a.style.display === 'none')
{
  a.style.display = 'block';
} else {
  a.style.display = 'none';
}

根据建议添加/删除（切换）类：

const as = document.getElementsByClassName('a');
const trigger = document.getElementById('trigger');

trigger.addEventListener('click', () => {
  for( let a of as) 
  {
    a.classList.toggle('b');
  }
});

.a {
  display: none;
}

.b {
  display: block;
}

<div class="a">
  Block A
</div>

<div class="a">
  Block B
</div>

<div class="a">
  Block C
</div>

<button id="trigger">Show A</button>

或删除.a类：

a.classList.remove('a');

但是，这确实消除了再次隐藏元素的可能性，因为选择器已从元素中移除。

JAVASCRIPT-取消隐藏类

2 个答案: