bugfix> javascript > 投稿

たとえば、 grid-row: 3 / span 1 の例として、このグリッドにdivを配置したいとします 、およびjavascriptでは、未知の番号を持つ変数があります(たとえば、 unknownNumber 、そして私は grid-column: line3 + unknownNumber / span 1 が欲しい 。だから、 unknownNumber = 1 、赤い領域が示すようにdivを配置します。それが可能だ?

回答 1 件
  • これがあなたが意図したものかどうかはわかりませんが、ここに私が持っているものがあります:

    これがペンです

    https://codepen.io/RealTimeStrategy/pen/qYzgaq

    var x = 2;
    var y = parseInt($('.table-row4').css('grid-column-start'));
    var z = x + y;
    console.log(z);
    $('.table-row4').css('grid-column-start', '' + z + '');
    y = parseInt($('.table-row4').css('grid-column-start'));
    $('.table-row4').css('background-color', 'blue').css('color', 'white');
    console.log(y);
    
    
    .wrapper {
      display: grid;
      grid-template-columns: repeat(8, [col-start] 1fr);
      justify-content: space-between;
      border: 1px solid black;
    }
    .table-row1 {
      grid-column: 1 / span 2;
    }
    .table-row2 {
      grid-column: 2 / span 1;
    }
    .table-row3 {
      grid-column: 3 / span 1;
    }
    .table-row4 {
      grid-column: 4 / span 1;
      border: 3px solid red;
    }
    .table-row5 {
      grid-column: 5 / span 1;
    }
    .table-row6 {
      grid-column: 6 / span 1;
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wrapper">
      <div class="table-row1">
        line1
      </div>
      <div class="table-row2">
        line2
      </div>
      <div class="table-row3">
        line3
      </div>
      <div class="table-row4">
        line4
      </div>
      <div class="table-row5">
        line5
      </div>
      <div class="table-row6">
        line6
      </div>
    </div>
    
    

あなたの答え