Почему не работает добавление стилей через функцию 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>