Setting List at the bottom of the screen in JS

Question

I have a bunch of posts and each one has a setting btn and a setting list, so in mobile version, I want to show the setting list from the bottom of the screen wherever the user is rightnow like Youtube, Facebook & Quora.

<button>Click Me 1</button>
<div class="setting">
  <ul>
    <li>Save</li>
    <li>Edit</li>
    <li>Delete</li>
    <li>Report</li>
    <li>Close</li>
  </ul>
</div>
<script>
    const btns = document.querySelectorAll('button'),
          settingLists = document.querySelectorAll('.setting');

    for (let i = 0; i < btns.length; i++) {
      const btn = btns[i];
      const settingList = settingLists[i];

      btn.addEventListener('click', ()=>{
        settingList.style.position = 'absolute';
        settingList.style.display = 'block';
        const settingListTop = btn.getBoundingClientRect().top + btn.getBoundingClientRect().height + btn.getBoundingClientRect().bottom - settingList.getBoundingClientRect().height ;
        console.log(`${settingListTop}`);
        settingList.style.top = `${settingListTop}`; /*******/
        settingList.style.width = '99%';
      })
    }
</script>

the js code above really makes sense, I am getting the bounding dimensions using getBoundingClientRect() and it gives me some right results in the console, but it doesn't assign this variable value to the top of the setting div element in this line of code

settingList.style.top = ${settingListTop};

So how can I assign a variable value to the bottom of an element OR is there another way to make this task in JS?

Answer 1

You can use window.matchMedia() option to check for viewport width and then apply the styles accordingly from js. Why not just edit css styles from js?