javascript - 通过 Javascript 隐藏具有特定样式的 Html 元素

Question

我试图在页面上隐藏特定类型的元素。它是一个仅分配了“infocell”类的 div。每页大约有 30 个元素。一些“信息单元”div 有绿色边框。这可能是通过javascript添加的，但我无法追踪。所以元素看起来像这样：

<div class="infocell entry18764"></div>

<div class="infocell entry1178" style="border-top-color: rgb(0,153,51);">
</div>

编辑：来自原始网站的 HTML

<div class="infocell entry28056">
<a href="/info/28056#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/28056.jpg">
</a>
<div>
<a href="/info/28056#top" data-ajax="true" style="font-size:17px;">
Majutsushi Orphen Hagure Tabi
</a>
<span style="display:block; font-size:10px;">
<a href="/info/28056#top" data-ajax="true">Details</a> - <a href="/info/28056/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:5.73 (143)
</div>
<div style="border-bottom:0;">
Action Adventure Drama Fantasy Magic Martial-Art
</div>
</div>
<div class="infocell entry8862" style="border-top-color: rgb(0, 153, 51);">
<a href="/info/8862#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/8862.jpg">
</a>
<div>
<a href="/info/8862#top" data-ajax="true" style="font-size:17px;">
Grisaia no Kajitsu
</a>
<span style="display:block; font-size:10px;">
<a href="/info/8862#top" data-ajax="true">Details</a> - <a href="/info/8862/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:8.05 (4203)
</div>
<div style="border-bottom:0;">
Comedy Drama Ecchi Harem Mystery Psychological Romance School Seinen Violence
</div>
</div>
<div class="infocell entry24494">
<a href="/info/24494#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/24494.jpg">
</a>
<div>
<a href="/info/24494#top" data-ajax="true" style="font-size:17px;">
Dakaretai Otoko 1-i ni Odosarete Imasu.
</a>
<span style="display:block; font-size:10px;">
<a href="/info/24494#top" data-ajax="true">Details</a> - <a href="/info/24494/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:7.66 (353)
</div>
<div style="border-bottom:0;">
Comedy Drama Romance Shounen-Ai Smut Yaoi
</div>
</div>
<div class="infocell entry2080" style="border-top-color: rgb(0, 153, 51);">
<a href="/info/2080#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/2080.jpg">
</a>
<div>
<a href="/info/2080#top" data-ajax="true" style="font-size:17px;">
Boku wa Tomodachi ga Sukunai
</a>
<span style="display:block; font-size:10px;">
<a href="/info/2080#top" data-ajax="true">Details</a> - <a href="/info/2080/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:7.67 (8086)
</div>
<div style="border-bottom:0;">
Comedy Ecchi Harem Romance School Seinen Slice of Life
</div>
</div>

我找不到任何适合“隐藏具有特定 css 样式的元素”的东西。我对 javascript 也几乎一无所知，但我尝试了以下方法：

function myFunction() {
  var x = document.getElementsByClassName("infocell");
  if (window.getComputedStyle(x).border-top-color === "rgb(0, 153, 51)") {
    document.getElementClassName("infocell").style.display = 'none';
  }
}

当然，这没有用。我不一定想学习javascript来解决这个问题。我希望你们中的一个可以帮助我解决问题。

标签： javascripthtmlcssdisplaygetelementsbyclassname

Answer 1

您可以附加一个<style>标签，选择具有该特定样式的元素，并为它们提供display: none：

document.body.appendChild(document.createElement('style')).textContent = `
  [style="border-top-color: rgb(0,153,51);"] {
    display: none;
  }
`;

<div class="infocell entry18764">content to remain</div>

<div class="infocell entry1178" style="border-top-color: rgb(0,153,51);">content to hide</div>

对于更新后的 HTML，请确保选择器字符串中的间距与元素中的间距相匹配：

document.body.appendChild(document.createElement('style')).textContent = `
  [style="border-top-color: rgb(0, 153, 51);"] {
    display: none;
  }
`;

<div class="infocell entry28056">
  <a href="/info/28056#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/28056.jpg">
  </a>
  <div>
    <a href="/info/28056#top" data-ajax="true" style="font-size:17px;">
Majutsushi Orphen Hagure Tabi
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/28056#top" data-ajax="true">Details</a> - <a href="/info/28056/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:5.73 (143)
  </div>
  <div style="border-bottom:0;">
    Action Adventure Drama Fantasy Magic Martial-Art
  </div>
</div>
<div class="infocell entry8862" style="border-top-color: rgb(0, 153, 51);">
  <a href="/info/8862#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/8862.jpg">
  </a>
  <div>
    <a href="/info/8862#top" data-ajax="true" style="font-size:17px;">
Grisaia no Kajitsu
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/8862#top" data-ajax="true">Details</a> - <a href="/info/8862/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:8.05 (4203)
  </div>
  <div style="border-bottom:0;">
    Comedy Drama Ecchi Harem Mystery Psychological Romance School Seinen Violence
  </div>
</div>
<div class="infocell entry24494">
  <a href="/info/24494#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/24494.jpg">
  </a>
  <div>
    <a href="/info/24494#top" data-ajax="true" style="font-size:17px;">
Dakaretai Otoko 1-i ni Odosarete Imasu.
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/24494#top" data-ajax="true">Details</a> - <a href="/info/24494/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:7.66 (353)
  </div>
  <div style="border-bottom:0;">
    Comedy Drama Romance Shounen-Ai Smut Yaoi
  </div>
</div>
<div class="infocell entry2080" style="border-top-color: rgb(0, 153, 51);">
  <a href="/info/2080#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/2080.jpg">
  </a>
  <div>
    <a href="/info/2080#top" data-ajax="true" style="font-size:17px;">
Boku wa Tomodachi ga Sukunai
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/2080#top" data-ajax="true">Details</a> - <a href="/info/2080/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:7.67 (8086)
  </div>
  <div style="border-bottom:0;">
    Comedy Ecchi Harem Romance School Seinen Slice of Life
  </div>
</div>