如何使用 Javascript 根据元素内容更改 css 样式

Question

在以下代码中，我想隐藏所有 li 不包含特定内容的标签。例如，隐藏任何不包含“ALL”或“LOGO”文本内容的li标签，如下图。

<ul>
    <li class="filterTag">
        <span><a href="~">ALL</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">GUIDES</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">LOGO</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">ICON</a></span>
    </li>
 </ul>

我知道下面的css隐藏了li:

<li style="display:none;">

但是，我希望有人可以帮助搜索 li 内容的 Javascript 函数，找到匹配值，然后将 class="filterTag" 转换为 style="display:none;".

以下 JS 代码对我不起作用，但是，它来自另一个示例，不确定是否需要所有代码：

var listLi=document.getElementsByTagName("li").getElementsByClassName('filterTag');
for(var i=0;i<listLi.length;i++) {
    var listLink = listLi[i].getElementsByTagName("a");
    for(var j=0;i<listLink .length;i++) {
        if(listLink [j].innerHTML!==('ALL' || 'LOGO'))
            listLink [j].style.display="none";
    }
}

请注意，我还添加了额外的过滤器：

.getElementsByClassName('filterTag') 因为页面上还有其他 li。

注意确定是否需要添加额外的：

.getElementsByTagName("a");?

Answer 1

在 CSS 中分隔样式总是好的，而不是编写内联样式。所以只需添加一个 class（在本例中为 fancy，根据您的需要进行更改）为了说明而不是隐藏，我添加了一个 background-color: orange;

请仔细阅读代码中的注释

var needles = ["ALL", "LOGO"]; // define the needles you need to find
var filterTags = document.querySelectorAll('.filterTag'); // get all filterTags
filterTags.forEach(function(filterTag){ // iterate over all filterTags
    if(needles.includes(filterTag.textContent.trim())) { // here the magic happens:
        // it compares if filterTag content is in the array of needles
        // if so we add the class name fancy 
        filterTag.classList.add('fancy');
        // instead of the above line you could do:
        // filterTag.style.display = "none";
    }
});

.fancy {
    /* change the style to display none instead of background-color */
    /* display: none; */
    background-color: orange;
}

<ul>
    <li class="filterTag">
        <span><a href="~">ALL</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">GUIDES</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">LOGO</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">ICON</a></span>
    </li>
 </ul>

Answer 2

您可以尝试使用 querySelectorAll()、forEach()、querySelector() 和 includes()，如下所示：

var li = document.querySelectorAll('.filterTag');
li.forEach(function(l){
  var a = l.querySelector('a');
  if(a.textContent.includes('ALL') || a.textContent.includes('LOGO')){
    l.style.display = 'none';
  }
});

<ul>
    <li class="filterTag">
        <span><a href="~">ALL</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">GUIDES</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">LOGO</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">ICON</a></span>
    </li>
 </ul>

如何使用 Javascript 根据元素内容更改 css 样式

How to change css styles based on element contents with Javascript

javascript

css

stylesheet