通過 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');