如何使用javascript从具有相同前缀的元素中删除所有“隐藏”属性？答案

【问题标题】：How to delete all "hidden" attributes from elements with same prefix using javascript?如何使用javascript从具有相同前缀的元素中删除所有“隐藏”属性？
【发布时间】：2022-01-10 14:48:00
【问题描述】：

比方说，我有这样的东西：

<div id="some_id">
    <img src="url1" id="el_id1" hidden>
    <img src="url2" id="el_id2" hidden>
    <img src="url3" id="el_id3" hidden>
</div>

现在，我需要 javascript 来删除所有这些“隐藏”属性。我不知道确切的 ID，我只知道它们都以“el_id”前缀开头。如何使用纯 javascript 实现它？

【问题讨论】：

您只想从显示的那些特定元素中删除hidden？

标签： javascript hidden

【解决方案1】：

所以使用attribute starts with selector 和removeAttribute

var elems = document.querySelectorAll('img[id^="el_"][hidden]');
elems.forEach(function(elem) {
  elem.removeAttribute("hidden");
});

[hidden] { display: none; }

<div id="some_id">
    <img src="url1" id="el_id1" hidden>
    <img src="url2" id="el_id2" hidden>
    <img src="url3" id="el_id3" hidden>
</div>

【讨论】：

【解决方案2】：

将document.querySelectorAll 与选择器一起使用：

选择<img> 内的所有<div>
有idstarting withel_
具有hidden 属性

使用removeAttribute()从找到的元素中删除hidden

document.querySelectorAll('div &gt; img[id ^= "el_"][hidden]').forEach(e =&gt; e.removeAttribute("hidden"));

<div id="some_id">
    <img src="url1" id="el_id1" hidden>
    <img src="url2" id="el_id2" hidden>
    <img src="url3" id="el_id3" hidden>
    <img src="url3" id="dontdelete">
</div>

【讨论】：

OP 从不要求删除元素；他们只想删除hidden 属性。
啊，误读了，感谢您对@connexo 的评论
e.hidden = false 将是删除属性的更简洁的方法。