假设我有一个垂直菜单,其编码如下:
<ul class="sub-menu">
<li id="menu-item-1" class="menu-item">
<a href="/page1">Page1</a>
</li>
<li id="menu-item-2" class="menu-item">
<a href="/page2"> </a>
</li>
<li id="menu-item-3" class="menu-item">
<a href="/page3">Page3</a>
</li>
</ul>
如您所见,page2 的 anchor 元素不包含任何文本。因此,我想从菜单中隐藏它。所以我正在寻找一个 javascript 解决方案,它可以执行以下操作:
if (content of anchor tag equals " ") then
set anchor's parent list element css to visiblity:hidden;
请注意,我无法在此使用 document.getElementById,因为列表 ID 是自动生成的,并且可能会随着时间的推移而改变。那么如何获取 anchor 标记的内容并设置正确的列表项的 CSS?
谢谢。
最佳答案
var link=document.getElementsByTagName("a");
for(var i=0;i<link.length;i++)
if(link[i].innerHTML.replace(/^\s+|\s+$/g, "")==='')
link[i].parentNode.style.display="hidden";
<强> Working Demo
关于javascript - 通过 Javascript 根据内容更改元素 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11644540/