根據數組的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

您可以通過檢查改變元素可見性的不同屬性的計算值來做到這一點：

此處的示例： 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;
    }

Answer 2

香草Javascript中沒有“快速”方法來執行此操作。 最好的選擇是循環：

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

Answer 3

嘗試使用類似下面的內容

 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>