How to get element attribute based on highest z-index

Question

I can't figure out how to acheive this, I have some elements with common_class class name, I want to get the ID of highest z-index element, is it possible?

function findHighestZIndex(elem)
{
  var elems = document.getElementsByClassName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
    var id = document.getElementsByClassName(elem); 
    id.getAttribute("id");
console.log(id);
    var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    var ElementDisplay = document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("display");
    if ((zindex > highest) && (zindex != 'auto') && (ElementDisplay == 'block'))
    {
      highest = zindex;
    }

}

Answer 1

Here's a short, working implementation of a getHighest(selector) function, along with an example snippet that uses this function to retrieve id values (click the boxes to increment their z-index).

(The significant portion is the first three functions; they could be compressed into one function if needed.)

function getHighest(selector) {
  // Return the element that matches selector having the largest z index
  return Array.from(document.querySelectorAll(selector)).reduce((a, b) => getZIndex(a) >= getZIndex(b) ? a : b);
}

function getZIndex(el) {
  // Return the z-index of el, or 0 if none is set.
  return parseInt(getCssProperty(el, "z-index")) || 0;
}

function getCssProperty(el, prop) {
  // Return the computed value of the css property prop for the element el
  return document.defaultView.getComputedStyle(el, null).getPropertyValue(prop);
}


// -------------------------------------------------------------------------
// additional code for demo below
// -------------------------------------------------------------------------


function updateHighest() {
  let highest = getHighest(".box");
  document.querySelector("#highest").textContent = `#${highest.id} (${getZIndex(highest)})`;
  document.querySelector("#highest").style.color = getCssProperty(highest, "background-color");
}

function setContentToZIndex(el) {
  el.textContent = getZIndex(el);
}

Array.from(document.querySelectorAll(".box")).forEach(b => {
  b.onclick = () => {
    b.style.zIndex = getZIndex(b) + 1;
    setContentToZIndex(b);
    updateHighest();
  };
  setContentToZIndex(b);
  updateHighest();
});

.box {
  width: 100px;
  height: 100px;
  display: block;
  background: grey;
  position: absolute;
  color: white;
  font-size: 2rem;
  text-align: center;
  line-height: 100px;
  user-select: none;
  font-family: sans-serif;
}

#b1 {
  background: #ff268a;
  left: 0px;
  top: 0px;
}

#b2 {
  background: #242792;
  left: 50px;
  top: 50px;
}

#b3 {
  background: #0ac3d6;
  left: 25px;
  top: 75px;
}

p {
  margin-left: 200px;
  font-family: sans-serif;
  font-size: 1.2rem;
}

<div class="box" id="b1"></div>

<div class="box" id="b2"></div>

<div class="box" id="b3"></div>

<p>highest z-index: <span id="highest"></span></p>

Answer 2

If you are referring to not getting the id value here:

var elems = document.getElementsByClassName(elem);
var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
      //This is all wrong here, commenting it out
      //var id = document.getElementsByClassName(elem); //You already have this collection
      //id.getAttribute("id"); //The above returns a collection so this would fail, you'd need to use an index of the collection
      //console.log(id);

      //You already have the elements you want, just use the i index to grab the element
      //and it's id
      console.log(elems[i].id);

Answer 3

You could modify the function to return the element with the highest z-index, and then just use .id to get its id.

Another issue: You're comparing zindex and highest as strings instead of numbers. I've prefixed zindex with the unary + operator before comparing, as in your example, if you were to compare a z-index of 9 and a z-index of 1000, it would believe 9 is greater.

Example:

function findHighestZIndex(elem) {
  var highest = 0;
  var highestElement = null;
  var elems = document.getElementsByClassName(elem);

  for (var i = 0; i < elems.length; i++) {
    var style = document.defaultView.getComputedStyle(elems[i], null);
    var zindex = style.getPropertyValue("z-index");
    var ElementDisplay = style.getPropertyValue("display");

    if ((zindex != 'auto') && (+zindex > highest) && (ElementDisplay == 'block')) {
      highest = zindex;
      highestElement = elems[i];
    }
  }

  return highestElement;
}

var elem = findHighestZIndex("zindex");
console.log(elem.id + " has the highest z-index.");

div.zindex {
  z-index: 500;
  position: absolute;
  display: block;
}

<div id="first-element" class="zindex" style="z-index: 1;"></div>
<div id="second-element" class="zindex" style="z-index: 3;"></div>
<div id="third-element" class="zindex" style="z-index: 5;"></div>
<div id="fourth-element" class="zindex" style="z-index: 100;"></div>
<div id="fifth-element" class="zindex" style="z-index: 99;"></div>

Answer 4

You can use these functions:

 function isNumeric(val) {
return !isNaN(parseFloat(val)) && isFinite(val);
 }
function findHighestZIndex(className) {
let queryObject = document.getElementsByClassName(className);
let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
let highest = 0;
var highestElem;

childNodes.forEach((node) => {
  // Get the calculated CSS z-index value.
  let cssStyles = document.defaultView.getComputedStyle(node);
  let cssZIndex = cssStyles.getPropertyValue('z-index');

  // Get any inline z-index value.
  let inlineZIndex = node.style.zIndex;

  // Coerce the values as integers for comparison.
  cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
  inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;

  // Take the highest z-index for this element, whether inline or from CSS.
  let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;

  if ((currentZIndex > highest)) {
    highest = currentZIndex;
    highestElem = node;
  }
});
var obj = {highestZIndex: highest, elem: highestElem};
 return obj;
}  

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<html>
<body>
<div class="test" style="z-index: 100;" id="x">1</div>
<div class="test" style="z-index: 10;">2</div>
<div class='test' id="test">3</div>
<script>
function isNumeric(val) {
    return !isNaN(parseFloat(val)) && isFinite(val);
  }
function findHighestZIndex(className) {
    let queryObject = document.getElementsByClassName(className);
    let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
    let highest = 0;
    var highestElem;
    
    childNodes.forEach((node) => {
      // Get the calculated CSS z-index value.
      let cssStyles = document.defaultView.getComputedStyle(node);
      let cssZIndex = cssStyles.getPropertyValue('z-index');
      
      // Get any inline z-index value.
      let inlineZIndex = node.style.zIndex;

      // Coerce the values as integers for comparison.
      cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
      inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;
      
      // Take the highest z-index for this element, whether inline or from CSS.
      let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;
      
      if ((currentZIndex > highest)) {
        highest = currentZIndex;
        highestElem = node;
      }
    });
    var obj = {highestZIndex: highest, elem: highestElem};
    return obj;
  }
 console.log(findHighestZIndex('test').elem.id);
</script>
</body>
</html>

</body>
</html>