Question

我有以下HTML：

DECLARE @DynamiccOlumns nvarchar(max)
;With cte
AS
(
SELECT  'Name_'+CAST(Sno AS VARCHAR(10))AS Names FROM
(
SELECT ROW_NUMBER()OVER(ORDER BY (SELECT number)) AS Sno FROM master..spt_values
)DT
WHERE DT.Sno<=10
)
SELECT DISTINCT @DynamiccOlumns=  STUFF((SELECT ', '+  Names +' nvarchar(10)' FROM cte FOR XML PATH ('')),1,1,'')
FROM cte
SELECT @DynamiccOlumns  AS Names

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

<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>

结果是我可以看到三个“图标”元素，但只有第一个应用了强制stye规则。

关于为什么不完全适用的任何建议？

Answer 1

为您的图标添加class而不是id（id在DOM中必须是唯一的。 class="icon"然后

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

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

Answer 2

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

<li  class="icon" ...

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

(".icon")

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

2 个答案: