0

Почему не работает добавление стилей через функцию aplyStyles()? Пробовал отлаживать код, вроде все верно, key = 'display', styles[key] = 'none'

var slides = document.querySelectorAll('.cube_vertical');

function aplyStyles(elem, styles) {
  
  for(var key in styles) {
    elem.style.key = styles[key];  
  }

}


aplyStyles(slides[0], {display: 'none'});
* {
  marign: 0 auto;
}

.cube {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
}

.cube_vertical {
  transform-style: preserve-3d;
  transform: rotateY(60deg);
  opacity: 0.5;
  width: 400px;
  height: 400px;
  position: absolute;
  
}

.cube_vertical:first-child {
  background-color: #74b9ff;
}

.cube_vertical:nth-child(2) {
  background-color: #6c5ce7;
}

.cube_vertical:last-child {
  background-color: #ff7675;
}
<div class="cube">
  <div class="cube_vertical">

  </div>
  <div class="cube_vertical">

  </div>
  <div class="cube_vertical">

  </div>
</div>

1
  • Потому что не style.key, а style[key]
    – andreymal
    13 апр 2019 в 9:22

1 ответ 1

1

Вы устанавливаете значения свойства key а не желаемого свойства

elem.style.key = styles[key]; 

Вот так надо

elem.style[key] = styles[key]; 

var slides = document.querySelectorAll('.cube_vertical');

function aplyStyles(elem, styles) {
  
  for(var key in styles) {
    elem.style[key] = styles[key];  
  }

}


aplyStyles(slides[0], {display: 'none'});
* {
  marign: 0 auto;
}

.cube {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
}

.cube_vertical {
  transform-style: preserve-3d;
  transform: rotateY(60deg);
  opacity: 0.5;
  width: 400px;
  height: 400px;
  position: absolute;
  
}

.cube_vertical:first-child {
  background-color: #74b9ff;
}

.cube_vertical:nth-child(2) {
  background-color: #6c5ce7;
}

.cube_vertical:last-child {
  background-color: #ff7675;
}
<div class="cube">
  <div class="cube_vertical">

  </div>
  <div class="cube_vertical">

  </div>
  <div class="cube_vertical">

  </div>
</div>

Ваш ответ

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

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