2

Как передать значение height из .rem в .tet - чтобы .rem - height 1 строки совпадал со значением .tet - height 1 строки и т.д. - использую псевдоселектор :nht-child.

То есть передать значение всех .rem - height в .tet - и сохранить порядок строк.

Мало опыта. Понимаю что через цикл - но не могу понять как именно.

Спасибо.

<div class="rem" style="height: 20px;"></div>
<div class="rem" style="height: 40px;"></div>
<div class="rem" style="height: 10px;"></div>
<div class="rem" style="height: 60px;"></div>

<div class="tet"></div>
<div class="tet"></div>
<div class="tet"></div>
<div class="tet"></div>

2 ответа 2

1

Если через цикл, то можно так:

var arr_rem = document.getElementsByClassName("rem")
var arr_tet = document.getElementsByClassName("tet")
for(var i = 0; i < arr_rem.length; i++){
    arr_tet[i].style.height = arr_rem[i].style.height
}
1
  • Спасибо большое
    – Pavel Tk
    27 дек 2017 в 13:55
1

Еще вариант

'use strict';

var div1 = document.querySelectorAll('.div1'), 
  div2 = document.querySelectorAll('.div2');

for (var i = 0; i < div1.length; i++) {  
  div2[i].style.height = div1[i].offsetHeight + 'px';
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.divs {
  display: flex;
  justify-content: space-between;
  margin: 15px auto;
  padding: 15px;
}

.divs > div {
  background: #ccc;
  color: #fff;
  margin-bottom: 5px;
  width: calc(25% - 10px);
  margin-left: 5px;
  margin-right: 5px;
  padding: 7px;
}

.divs:nth-of-type(2) > div {
  background: #00f;
}
<div class="divs">
  <div class="div1" style="height: 50px;">div 1</div>
  <div class="div1" style="height: 80px;">div 2</div>
  <div class="div1" style="height: 30px;">div 3</div>
  <div class="div1" style="height: 60px;">div 4</div>
</div>
<div class="divs">
  <div class="div2">div 1</div>
  <div class="div2">div 2</div>
  <div class="div2">div 3</div>
  <div class="div2">div 4</div>
</div>

1
  • спасибо большое
    – Pavel Tk
    27 дек 2017 в 13:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.