这个问题是jQuery countdiv中具有display：block的答案的一方重复。我在 -if- 语句中将getElementsByTagName更改为getElementsByClassName，block更改为flex。
因为我需要以下功能：计算使用样式显示设置的div：flex 在单独的样式表中，因此不内联，然后在div 中输出数字计数;当计数为"0"时，输出在文本中应为 0，否则计数的div 数正确。
我是Javascript的初学者，不知道我应该如何继续。
谢谢。
$(function(){
var allElems = document.getElementsByClassName('displayflex');
var count = 0;
for (var i = 0; i < allElems.length; i++)
{
var thisElem = allElems[i];
if (thisElem.style.display == 'flex') count++;
}
alert(count);
});.displayflex {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="displayflex"></div>
<div class="displayflex"></div>
<div class="displayflex"></div>
<div></div>
</div>
<div id="outputnumber"></div>问题是style属性只读取内联样式。您需要查看每个元素的计算样式，以查看通过 CSS 应用的样式。
这里使用变量的适当const和let声明，简洁起见使用for...of循环，并使用结果更新相关div 的textContent。
$(function () {
const allElems = document.getElementsByClassName('displayflex');
let count = 0;
for (const elem of allElems) {
const compStyles = window.getComputedStyle(elem);
if (compStyles.getPropertyValue('display') === 'flex') {
count++;
}
}
document.getElementById('outputnumber').textContent = count;
});.displayflex {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="displayflex"></div>
<div class="displayflex"></div>
<div class="displayflex"></div>
<div></div>
</div>
<div id="outputnumber"></div>你需要像下面这样的计算样式
$(function(){
var allElems = document.getElementsByClassName('displayflex');
var count = 0;
for (var i = 0; i < allElems.length; i++)
{
var thisElem = allElems[i];
if (window.getComputedStyle(thisElem, null).display == 'flex') count++;
}
alert(count);
});
<html>
<head>
<title>Count div</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.displayflex {
display: flex;
}
</style>
</head>
<body>
<div id="content">
<div class="displayflex"></div>
<div class="displayflex"></div>
<div class="displayflex"></div>
<div class="displayflex"></div>
<div></div>
</div>
<div id="outputnumber"></div>
<script>
$('#outputnumber').html($('.displayflex').length);
</script>
</body>
</html>