<div id="box">
</div>
<button class ="but">hello</button>
#box{
border: 1px solid black;
width: 300px;
height: 200px;
transform: translate(100px, 30px)
}
function bottom2_m() {
const m2 = document.querySelector('#box')
let left2 = window.getComputedStyle(m2).transform
left2 = left2.split(',')//['matrix(1, 0, 0, 1, 100, 30)']
left2 = [Number(left2[4]), Number(left2[5].slice(0, -1))]
console.log(left2, 'hello')
let new_y = left2[1] + 30;
m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y + 'px)'
}
button = document.querySelector('.but')
button.addEventListener( 'click', bottom2_m )
blueLinesArr = document.querySelectorAll('.blueLineNav')
linksBlueLinesArr = [...document.querySelectorAll('.li-page-a')]
document.querySelector('.logo').addEventListener('click', ()=>{
sessionStorage.setItem('clickIndex', -1)
})
linksBlueLinesArr.forEach((link) =>{
link.addEventListener('click', ()=>{
sessionStorage.setItem('clickIndex', linksBlueLinesArr.indexOf(link))
})
blueLinesArr.forEach(item =>{
item.style.display = 'none'
})
try{
blueLinesArr[sessionStorage.getItem('clickIndex')].style.display = 'block'
} catch(err){}
})