通过 Javascript 强制 CSS 规则被部分应用答案

【问题标题】：Forced CSS rule via Javascript is partially applied通过 Javascript 强制 CSS 规则被部分应用
【发布时间】：2017-07-13 18:28:56
【问题描述】：

我有以下 HTML：

<li id="telephone"><a href="tel:938409"target="_blank"><img  src="https://playground.air-srl.com/icombanner/telico.png"/></a></li>
                    <li id="ico"><a href="./cmbmodal.php?servizio=TEST" target="_blank"><img src="https://playground.air-srl.com/icombanner/cmbico.png"/></a></li>
                    <li id="status"></li>
                    <li  id="icon"><a href="https://m.me/xxxx/" target="_blank"><img src="https://playground.air-srl.com/icombanner/fbico.png"/></a></li>

                    <li id="icon">
                        <a href="https://api.whatsapp.com/send?phone=03480224&text=Buongiorno, sono interessato alla vostra offerta." target="_blank">
                            <img src="https://playground.air-srl.com/icombanner/whaico.png"/>
                        </a>
                    </li>

在“onload”JS 函数中，我以这种方式强制 CSS：

document.getElementById("telephone").style="display: block";
                        document.getElementById("icon").style="display: block";
                        document.getElementById("status").style="display: block";

结果是我有三个“图标”元素，如您所见，但只有第一个应用了强制样式规则。

关于为什么它没有完全应用的任何建议？

【问题讨论】：

编辑：HTML 代码中的第二个“li”元素仍然有“icon”id 而不是“ico”。
ID 必须是唯一的。
id 属性是唯一的。浏览器不希望您拥有多个 id 为 icon 的元素。使用class="icon" 和document.querySelectorALl('.icon').forEach(element => element.style = "display: block;"
非常感谢。我忘记了这条规则！
@LorenzoNeri：不，即使经过编辑，上面还有两个id="icon"（和一个id="eco"）。

标签： javascript css

【解决方案1】：

给你的图标一个class 而不是id（ids 在 DOM 中必须是唯一的）。 class="icon" 然后

var icons = document.getElementsByClassName('icon');
Array.prototype.forEach.call(icons, function(icon){
  icon.style.display = "block";
});

document.getElementsByClassName() 返回具有所有给定类名的所有子元素的类数组对象

【讨论】：

【解决方案2】：

您有 3 个具有相同 ID 的元素。 ID 是唯一属性使用类：

<li  class="icon" ...

并将JS函数中的选择器改为：

(".icon")

【讨论】：

这里必须成为这个的欺骗目标。
我认为自己是 Stackoverflow 菜鸟。我不应该回答半琐碎的问题而是寻找重复的线程吗？
是的。 SO 的目标是建立一个有用的编程信息数据库。理想情况下，会有一个问题和一组所有重复项都指向的答案。该系统没有达到这个理想，尤其是因为它不会使查找重复项变得非常容易并且不会奖励这样做（在我看来，SO 中存在两个关键缺陷），但这就是目标。