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

Question

我想隐藏页面上的特定类型的元素。它是一个 div，只有 class“infocell”分配给了它。每页大约有 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 只是为了解决这一问题。我希望你们中的一个能帮助我解决问题。

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>

Answer 2

检查 div 上的特定 class。

const divTochange = document.querySelector('div');
divTochange.classList.contains('class you want to filter');

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

Hide an Html Element with a specific style via Javascript

html

javascript

css

getelementsbyclassname

display