How to know the id of an element through a class in function if the style "display2 step from none to block [duplicated]

Question

How to know the id of an element through a class in function if the style "display2 step from none to block [duplicated]

Navigation

#1 by (0 votes)

0

Hello friends I have a lot of dynamic elements that have the same class, and these are shown or not by the display block style, I would like to know based on the change of style the id of that element.

javascript jquery css

asked by Jcastillovnz 19.10.2018 в 17:07

source

1 answer

cone send data to a web service to receive data Problems reading an array and presenting it in the view in Laravel 5.6

score 0 · Answer 1

Since you do not share your code I had to invent it: I have 10 div, which have display:block . The pairs, however, have display: none .

To know the value of display for a div d I use:

let estilos = window.getComputedStyle(d, null);
let _display = estilos.getPropertyValue("display");

If I want to know the id of the divs (d) that have display:block for example, I write:

if(_display == "block"){console.log(d.id)}

Below is an example:

let lamismaclaseArray = Array.from(document.querySelectorAll(".lamismaclase"));

lamismaclaseArray.forEach(d=>{
  let estilos = window.getComputedStyle(d, null);
  let _display = estilos.getPropertyValue("display");
  //if(_display == "block"){console.log(d.id)}
  if(_display == "none"){console.log(d.id)}
})

article{display:flex;}

.lamismaclase {
  width: 50px;
  height: 50px;
  border: 1px solid;
  margin: 0.5em 0.25em;
  display: block;
  text-align:center;
  line-height:50px;
}

/* los pares tienen display none */
.lamismaclase:nth-of-type(odd){display:none}

<article>
<div class="lamismaclase" id="_0">0</div>
<div class="lamismaclase" id="_1">1</div>
<div class="lamismaclase" id="_2">2</div>
<div class="lamismaclase" id="_3">3</div>
<div class="lamismaclase" id="_4">4</div>
<div class="lamismaclase" id="_5">5</div>
<div class="lamismaclase" id="_6">6</div>
<div class="lamismaclase" id="_7">7</div>
<div class="lamismaclase" id="_8">8</div>
<div class="lamismaclase" id="_9">9</div>
<article>