Get Javascript object from an array based on it's CSS property -

let's have 3 objects in array:

var redboxx=document.getelementbyid("redbox"); var blueboxx=document.getelementbyid("bluebox"); var orangeboxx=document.getelementbyid("orangebox");  var shapearray = [redboxx, blueboxx, orangeboxx]; 

i want grab object array based on it's current visibility status (as in visibility: "hidden" or "visible"). how do that?

try using below

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>