retrieve image source based on z-index

I found a way to retrieve the z-index value using this code snippet:

  findHighestZIndex('div');
    function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
    var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    if ((zindex > highest) && (zindex != 'auto'))
    {
      highest = zindex;
    }
  }
  return highest;
}

The issue I encountered is that it returned 9999, and I need to identify the specific div, img or src element with that z-index value. My goal is to adjust the z-index to a lower value in order to place another element in front of it.

Thus far, my attempts to search by z-index and retrieve the corresponding source have been unsuccessful.

javascriptcssz-index

Answer â„–1

To retrieve the element instead of the zIndex in your function, adjust your code accordingly. Extract the zIndex, src, and name from the element to manipulate them as needed.

var element = findHighestZIndex('div'),
zIndex = ele.style.zIndex, 
{src, name} = ele;
console.log(zIndex, src, name); // displays all properties

function findHighestZIndex(elem)
{
  var elements = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elements.length; i++)
  {
    var zindex=document.defaultView.getComputedStyle(elements[i],null).getPropertyValue("z-index");
    if ((zindex > highest) && (zindex != 'auto'))
    {
      highest = elements[i];
    }
  }
  return highest;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to align a DIV in the center of another DIV?

I am currently working on building a footer. My goal is to center the 4 divs in the footer, similar to the first paragraph or the 5 icons that are not rendering correctly. What would be the most effective approach to achieve this? Demo: http://jsfiddle.n ...

htmlcssfooter960.gs

The "variable" used in the React app is not defined, resulting in a no

Following the tutorial of Mosh Hamedani, I attempted to create a react-app. You can watch the tutorial here. I followed his instructions exactly as mentioned. I encountered an issue when trying to pass an argument named product to a function called on on ...

javascriptreactjsparametersonclickreact-component

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

htmlcssgoogle-chrome

Transfer the index of a for loop to another function

Can you explain how to pass the 'i' value of a for loop to a different function? I want to create a click function that changes the left position of a <ul> element. Each click should use values stored in an array based on their index posi ...

javascriptjqueryfor-loop

Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

I am working with an object that has the following structure; { SensorA: [ { id: 122, valueA: 345, "x-axis": 123344 }, { id: 123, valueA: 125, "x-axis": 123344 }, { id: 123, valueA: 185, "x-axis": 123344 }, { ...

javascriptvue.jschart.js

What is the process for monitoring a property in Angular?

Seeking clarification on Angular - is it possible to detect property value changes within the same class? import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', ...

javascriptangularproperties

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

javascripthtmlcssreactjsnext.js

Guide on implementing router-link within a select option dropdown in a Vue.js application

a.vue <template> <div>hi i am component 1</div> </template> <script> export default { name: "a", }; </script> b.vue <template> <div>hi i am component 2</div> </template> <script> ...

javascriptvue.js

Inject JavaScript Object Information into Bootstrap Modal

After iterating through each object and assigning its data to an individual div along with a button, I encountered an issue. When testing the buttons, I noticed that only the last object's data was displayed in all of the modal windows. Any suggestion ...

javascriptjqueryhtmlloopsmodal-dialog

Express and Firebase Function: Headers cannot be set once they have already been sent

My experience has been mainly with the Hapi framework for developing RESTful APIs. However, for my current project, I decided to use Express and I'm encountering some confusion regarding the issues that are arising. While testing the POST endpoint us ...

javascriptfirebaseexpress

What could be causing the issue with fetch not functioning in my mobile browser?

Recently, I created a basic NodeJS server that stores strings in a database when accessed via "/add", and then sends all those strings to my ReactJS front-end using the endpoint "/getall". The strings are displayed on the front-end using the map function. ...

javascriptnode.jsreactjsfetch

Sharing package JSON file dependencies with child engines and addons in Ember.js

I am seeking information on how Ember Js can share the parent app's package.json file dependency (xyz:3.0.0) with child engines and addons without them needing to redeclare the dependencies in their own package.json files. This is to reduce the overal ...

javascripthtmlnpmember.jspackage.json

The console is reporting an error stating it cannot read the charCodeAt property

<script> var str=prompt('please enter a string'); var a= str.split(''); for (j=0; j<str.length; j++){ for(i=j; i<str.length; i++) { if(a[i].charCodeAt(0) > a[i+1].charCodeAt(0)) { var b= a[i]; a[i]=a[i+ ...

javascriptstringsortingcharacterfromcharcode

What is the process for uploading or hosting a Reactjs website?

Currently, I am in the process of developing a React web application project using create-react-app. The project is nearly complete and as part of my preparation, I have been researching how to obtain a hostname. During my research, I came across https://w ...

javascriptreactjswebhosting

Discovering the Cookie in Angular 2 after it's Been Created

My setup includes two Components and one Service: Components: 1: LoginComponent 2: HeaderComponent (Shared) Service: 1: authentication.service Within the LoginComponent, I utilize the authentication.service for authentication. Upon successful authent ...

javascriptangulartypescriptcookies

What is the best way to position a button on the right side of the page, ensuring that all text

I need help aligning my button (JSX component) to the right side while ensuring that all text remains on a single line. I am working with next.js and tailwindcss, and the button includes plain text as well as a react-icon. These components are all wrapped ...

cssnext.jstailwind-cssreact-icons

Integrating threejs dynamically into a Create React App environment

When I am dynamically loading Three.js, the variable THREE is not found. I have created a React project using create-react-app and copied the three js file into the public folder. Here's the directory structure: src public ├── js │ └─┠...

javascriptreactjsthree.jscreate-react-app

Managing the "Accept Cookies" notification using Selenium in JavaScript

As I use Selenium to log in and send messages on a specific website, I am faced with a cookie popup that appears each time. Unfortunately, clicking the accept button to proceed seems to be quite challenging for me. Here is an image of the cookie popup Th ...

javascripthtmlselenium

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

javascriptjqueryhtmlcssangularjs

What are some ways to customize the appearance of my ReactJS application while it's being viewed on Chrome on

I'm currently in the process of running my ReactJS app on a Panasonic Vierra Smart TV browser. After importing core-js and babel-polyfill, I managed to load the webpage but encountered an issue with the UI alignment. The styling does not display corre ...

cssreactjssmart-tvbabel-polyfill