顯示長度 display="none"; 使用 JavaScript

Question

我有一個函數，當點擊某個東西時，它會執行 style.display = "none" 。

我想知道如何找出沒有顯示的元素的長度。

 function closeEvent() { var close = document.getElementsByClassName("close"); for (var i = 0; i < close.length; i++) { close[i].onclick = function () { var div = this.parentElement; div.style.display = "none"; renderGraph(); } } }

 <div id="myDIV" class="header"> <h1>My Daily Tasks</h1> <p>Add a time and task then press enter. When finished task click on task bar</p> <p>To delete task click on <span id="x-text">x</span> in the corner of task bar</p> <input type="time" id="myInput1" value="06:00"> <input name="text" type="text" id="myInput" placeholder="My task..."> <span onclick="newElement()" class="addBtn" id="myBtn"></span> </div> <ul id="columns"> </ul>

Answer 1

您可以使用以下代碼僅選擇具有樣式屬性“display:none”的元素並獲取找到的總數。

var total = document.querySelectorAll('[style="display: none;"]').length

查看 querySelector 和 querySelectorAll 的完整文檔。 它們都是非常強大的選擇器，您可以像使用 css 選擇器一樣使用它們：

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

您將面臨的問題是您的代碼很可能不是唯一以這種方式隱藏元素的代碼。
許多庫也使用這種內聯樣式來隱藏元素，例如，這就是jQuery.hide()所做的。

所以你很可能會發現誤報，如果唯一的區別點是那種風格。

根據您的確切用途，如果您需要跟蹤它們並經常重用，您可以簡單地維護這些元素的數組：

 const myhidden_elements = []; document.addEventListener('click', e => { if( e.target.matches(".hideable") ) { e.target.style.display = "none"; myhidden_elements.push(e.target); const hidden_count = myhidden_elements.length; console.log( hidden_count ); } });

 <div class="hideable">hide me 1</div> <div class="hideable">hide me 2</div> <div class="hideable">hide me 3</div> <div class="hideable">hide me 4</div> <div class="hideable">hide me 5</div> <div class="hideable">hide me 6</div>

但最好將您自己的class添加到這些隱藏元素中。 維護和訪問您感興趣的這些元素可能更容易。

 document.addEventListener('click', e => { if( e.target.matches(".hideable") ) { e.target.classList.add('my-hidden-class'); const hidden_count = document.querySelectorAll('.my-hidden-class').length; console.log( hidden_count ); } });

 .my-hidden-class { display: none; }

 <div class="hideable">hide me 1</div> <div class="hideable">hide me 2</div> <div class="hideable">hide me 3</div> <div class="hideable">hide me 4</div> <div class="hideable">hide me 5</div> <div class="hideable">hide me 6</div>