обменять элементы в стеке с javascript - PullRequest
Новая
       13

обменять элементы в стеке с javascript

0 голосов
/ 25 марта 2020

Я хочу, чтобы элементы переключали свой порядок при нажатии на них. Кажется, z-index значение всегда равно 1. Я не могу понять, с этим не получается: 

<html>
  <head>
    <title></title>
  </head>
  <style>
    .conteneur {
        display: grid;
    }
    .contenus {
        grid-column: 1;
        grid-row: 1;
        width: 100px;
        height: 100px;
    }
    
    .premier {
        background-color: red;
        z-index: 0;
    }
    
    .second {
        background-color: green;
        z-index: 1;
    }
  </style>

  <script>
    function echange() {
        let elts = document.getElementsByClassName("contenus");
        for (let i=0; i < elts.length; i++) {
            let z = elts[i].style.zIndex;
            elts[i].style.zIndex = (z + 1) % 2;
        }
    }
  </script>

  <body>
    <div class="conteneur">
      <div class="contenus premier" onclick="echange()"></div>
      <div class="contenus second" onclick="echange()"></div>
    </div>
  </body>
</html>

1 Ответ

2 голосов
/ 25 марта 2020

Существует несколько проблем:

  • Вам необходимо получить вычисленные стили на window.getComputedStyle, поскольку z-index не является встроенным стилем.

  • zIndex является строкой, поэтому z + 1 в конечном итоге будет 11, вам нужно разобрать его в число, добавив перед ним + перед выполнением вычисления 

<html>
  <head>
    <title></title>
  </head>
  <style>
    .conteneur {
        display: grid;
    }
    .contenus {
        grid-column: 1;
        grid-row: 1;
        width: 100px;
        height: 100px;
    }
    
    .premier {
        background-color: red;
        z-index: 0;
    }
    
    .second {
        background-color: green;
        z-index: 1;
    }
  </style>

  <script>
    function echange() {
        let elts = document.getElementsByClassName("contenus");
        for (let i=0; i < elts.length; i++) {
            let z = getComputedStyle(elts[i]).zIndex;
            elts[i].style.zIndex = (+z + 1) % 2;
        }
    }
  </script>

  <body>
    <div class="conteneur">
      <div class="contenus premier" onclick="echange()"></div>
      <div class="contenus second" onclick="echange()"></div>
    </div>
  </body>
</html>
...