Не получается вернуть параметры класса CSS с помощью JS

const mainCircle = document.getElementsByClassName('menu'); 
const textCollect = document.getElementById('menu__text'); 
const collection = document.getElementById('collection'); 
const closeMenu = document.getElementsByClassName('close'); 
arrayMainCircle = []; 
arrayCloseMenu = []; 
 
function openCollection() { 
  for (var i = 0; i < mainCircle.length; i++) { 
    arrayMainCircle = mainCircle[i] 
  } 
  console.log(arrayMainCircle); //то что добавлено для наглядности 
  arrayMainCircle.addEventListener('click', function() { 
    console.log(arrayMainCircle); //то что добавлено для наглядности 
    arrayMainCircle.classList.add('menu-act'); 
    arrayMainCircle.style.width = '100%'; 
    arrayMainCircle.style.height = '100%'; 
    textCollect.innerHTML = ''; 
    collection.style.opacity = '1'; 
  }) 
} 
 
function closeCollection() { 
  for (var i = 0; i < closeMenu.length; i++) { 
    arrayCloseMenu = closeMenu[i]; 
  } 
  arrayCloseMenu.addEventListener('click', function() { 
    console.log(arrayMainCircle); //то что добавлено для наглядности 
    arrayMainCircle.style.borderRadius = '50%'; 
    arrayMainCircle.style.height = '250px'; 
  }) 
} 
 
function main() { 
  openCollection(); 
  closeCollection(); 
} 
 
window.onload = function() { 
  main(); 
}

body { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Oswald', sans-serif; 
} 
 
.header { 
  background: url("http://via.placeholder.com/250x250/33ff99/33ff99") no-repeat top/cover; 
  height: 100vh; 
  width: 100%; 
  position: fixed; 
  background-color: black; 
} 
 
.menu { 
  height: 250px; 
  width: 250px; 
  background: black; 
  opacity: 0.5; 
  border-radius: 50%; 
  position: relative; 
  left: 70%; 
  top: 60%; 
  cursor: pointer; 
  transition: .7s; 
} 
 
.menu a { 
  position: absolute; 
  left: 50%; 
  margin-left: -48px; 
  top: 50%; 
  margin-top: -20px; 
  color: white; 
  text-decoration: none; 
  text-transform: uppercase; 
  font-size: 20px; 
  opacity: 1; 
} 
 
.menu:hover { 
  opacity: 1; 
  transition: .7s; 
  height: 260px; 
  width: 260px; 
} 
 
#collection { 
  opacity: 0; 
  transition: .7s; 
} 
 
#close { 
  width: 40px; 
  height: 40px; 
  background: none; 
  position: relative; 
  margin-top: 10px; 
  margin-left: 10px; 
} 
 
#close span, 
#close span::after, 
#close span::before { 
  width: 30px; 
  height: 2px; 
  background: white; 
  position: absolute; 
  display: block; 
  top: 50%; 
  margin-top: -0.5px; 
  left: 50%; 
  margin-left: -15px; 
} 
 
#close span::after, 
#close span::before { 
  content: ''; 
  display: block; 
} 
 
#close span::after { 
  transform: translateY(5px); 
  transform: rotate(-45deg); 
} 
 
#close span { 
  height: 0px; 
} 
 
#close span::before { 
  transform: translateY(-5px); 
  transform: rotate(45deg); 
} 
 
.menu-act { 
  height: 100vh; 
  width: 100%; 
  top: 0; 
  left: 0; 
  opacity: 0.95; 
  border-radius: 0%; 
  transition: .7s; 
}

<header class="header" id="header"> 
  <div class="menu" id="menu"> 
    <a href="#" id="menu__text">Коллекция</a> 
    <div class="collection" id="collection"> 
      <div id="close" class="close"> 
        <span class="close__span"></span> 
      </div> 
    </div> 
  </div> 
</header>