javascript - 根据它的 CSS 属性从数组中获取 Javascript 对象

Question

假设我在一个数组中有 3 个对象:

var redBoxx=document.getElementById("redBox");
var blueBoxx=document.getElementById("blueBox");
var orangeBoxx=document.getElementById("orangeBox");

var shapeArray = [redBoxx, blueBoxx, orangeBoxx];

我想根据对象的当前可见性状态(如可见性:“隐藏”或“可见”)从数组中抓取一个对象。我该怎么做？

Answer 1

尝试使用类似下面的东西

var redBox = document.getElementById('redBox');
var blueBox = document.getElementById('blueBox');
var orangeBox = document.getElementById('orangeBox');

var list = [redBox, blueBox, orangeBox];
Array.prototype.filterByProp = function(prop, value){
  var currentStyle = window.getComputedStyle;
	return this.filter(function(el){return value === currentStyle(el,null)[prop]});
}
//list.filter(function(el){return window.getComputedStyle(el,null).visibility === 'visible';})
console.log('hidden:' , list.filterByProp('visibility','hidden'));
console.log('Visible:' , list.filterByProp('visibility','visible'));

div{
  box-sizing:border-box;
  width:calc(100%/3);
  height: 50vh;
  border:1px solid #000;
  float:left;
}
#redBox{
  background:#f00;
}
#blueBox{
  background:#00f;
  visibility:hidden;
}
#orangeBox{
  background:#f60;
  }
}

<div id="redBox">
</div>
<div id="blueBox">
</div>
<div id="orangeBox">
</div>