更新

Question

在下面的给定代码中，div#item-1的{{1}}仅被隐藏。

但是如何通过指定父级来完成？

和

如何隐藏div#parent-1元素？

＆＃13;

#item-1

＆＃13;

function HideElement(id)
{
	var doc = document.getElementsByClassName(id);
    doc.style.visibility = 'hidden';
}

HideElement('item-1');

＆＃13;

#parent-1
{
  background: red;
}

#parent-2
{
  background: blue;
}

＆＃13;

更新

我将子元素<div id="parent-1"> <div class="item-1">Item 1</div> <div class="item-2">Item 2</div> <div class="item-3">Item 3</div> </div> <div id="parent-2"> <div class="item-1">Item 1</div> <div class="item-2">Item 2</div> <div class="item-3">Item 3</div> </div>属性替换为id，但问题是如何访问元素的样式属性？

我发现了这个错误：

class

Answer 1

编辑：我已在评论中采纳了一些建议并将其纳入此答案。

您最好使用class或data-属性而不是id s。正如所指出的那样id应该是唯一的，因此页面上只能有一个。请考虑以下html＆amp; js：

<div id="parent-1">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

<div id="parent-2">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

的CSS：

.item-hidden{
  visibility: hidden;
}

的javascript：

function hideElement(selector){

  var items = document.querySelectorAll(selector);

  for(var i = 0, l = items.length; i < l; ++i){
    items[i].classList.add('item-hidden');
  }

}

//usage:
hideElement('.item-1'); // will hide all '.item-1' elements
hideElement('#parent-1 div'); // will hide all <div>s inside of #parent-1

querySelectorAll() reference

classList reference

编辑：关于问题的更新：

document.getElementsByClassName();将返回nodelist，而不只是node。请注意＆＃39; s＆＃39;在getElement s ByClassName中。您必须使用此答案中的循环来更改每个节点的属性。

Answer 2

尝试使用数据属性并简单地使用它们。就像在你的例子中一样，你可以使用data-id="item-1"来完成游戏。

参考data- attributes。

如何使用纯Javascript通过其父id元素获取id元素元素

更新

2 个答案: