显示长度 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>