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

Question

我试图在页面上隐藏特定类型的元素。 这是一个仅分配了 class“信息单元”的 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。 我希望你们中的一个可以帮助我解决问题。

Answer 1

您可以 append 一个<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');