如何使用JavaScript通过CSS属性值选择元素

Question

我需要获取页面上所有元素的计数,这些元素的display属性设置为block.但我不必使用JQuery,我需要在纯JavaScript中执行它

Answer 1

你在评论中说过:

我有一个lihtml上的项目(元素)列表,我需要获取li具有显示属性块的所有元素的计数

和

这些元素是从外部css文件设置的

这意味着您必须使用getComputedStyle(或过时的IE版本currentStyle)单独检查每个元素.

你说你有一个清单,所以如果我假设你有一个NodeList或者HTMLCollection,我们可以使用Array.prototype.reduce:

var count = Array.prototype.reduce.call(yourList, function(count, element) {
    return count + (getComputedStyle(element).display === "block" ? 1 : 0);
}, 0);

如果您必须支持过时的IE版本,您需要检查currentStyle:

var getStyle = window.getComputedStyle || function getStyle(element) {
    return element.currentStyle;
};
var count = Array.prototype.reduce.call(yourList, function(count, element) {
    return count + (getStyle(element).display === "block" ? 1 : 0);
}, 0);

如果您需要它们的列表而不仅仅是计数(您已经说过"计数",但是...),请filter改用:

var getStyle = window.getComputedStyle || function getStyle(element) {
    return element.currentStyle;
};
var filtered = Array.prototype.filter.call(yourList, function(element) {
    return getStyle(element).display === "block";
});