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

Question

Let's say I have 3 objects in an array:

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

var shapeArray = [redBoxx, blueBoxx, orangeBoxx];

I want to grab an object from the array based on it's current visibility status (as in visibility: "hidden" or "visible"). How do I do that?

You can use jQuery with a handy selector or you call loop through all the ids you have and build a new array with only those elements. — Ismael Miguel
– Ismael Miguel, Commented Feb 5, 2016 at 19:52
I'd suggest jQuery as well for this: it's very easy to achieve this using is(":visible"). — DvS
– DvS, Commented Feb 5, 2016 at 19:55
Will only one object be visible at a time or do you need to deal with the results as a set? — canon
– canon, Commented Feb 5, 2016 at 20:02

Ananthaprakash · Accepted Answer · 2016-02-05 21:00:43Z

Try using something like 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>

RobertAKARobin · Accepted Answer · 2016-02-05 19:59:22Z

1

There's not a "quick" way to do this in vanilla Javascript. Your best bet is with a loop:

function visibleElementsIn(elements){
  var output = [];
  elements.forEach(function(element){
    var visibility = window.getComputedStyle(element).visibility;
    if(visibility === "visible"){
      output.push(element);    
    }
  });
  return output;
}

answered Feb 5, 2016 at 19:59

RobertAKARobin

4,3044 gold badges29 silver badges48 bronze badges

Comments

Don Rhummy · Accepted Answer · 2016-02-05 20:03:49Z

1

You can do this by checking the computed value of the different properties that change an element's visiblity:

Example here: https://jsfiddle.net/tt1s5mpm/

    function isVisible(el)
    {
       var styles = getComputedStyle( el );

       //Three different things are used for visibility
       if ( styles.getPropertyValue( "visibility" ) !== "hidden" &&
          styles.getPropertyValue( "display" ) !== "none" &&
          parseInt( styles.getPropertyValue( "opacity" ) ) !== 0 //You should really check all the versions like "-webkit-", etc
       )
       {
        return true;
       }

       return false;
    }

edited Feb 5, 2016 at 20:03

answered Feb 5, 2016 at 19:58

Don Rhummy

26.1k53 gold badges196 silver badges364 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related