Моя кнопка не перемещается в верхний правый угол с левой стороны через javascript DOM

Question

У меня есть кнопка в html, которая находится в среднем левом углу экрана, эта кнопка имеет такой стиль, как:

  .openbtn {
      font-size: 20px;
      border-radius: 0 5px 5px 0;
      cursor: pointer;
      position: fixed;
      Top: 50%;
      left: 0px;
      background-color: #181A1B;
      color: white;
      padding: 10px 15px;
      border: none;
      z-index: 1;
      transition: 0.5s;
  }

Теперь, когда я нажимаю эту кнопку, я хочу, чтобы она перешла на верхнюю вправо, и когда я нажимаю снова, он должен go вернуться в исходное положение. В Javascript кнопка обрабатывается следующим образом:

    var lastState = false;

    function sideButtonClicked() {

      if(!lastState){
          //open
          lastState=true
          document.getElementById("Button").style.left = "";
          document.getElementById("Button").style.right = "0";
          document.getElementById("Button").style.top = "0";
      }
      else{
          //close
          lastState=false
          document.getElementById("Button").style.left = "0px";
          document.getElementById("Button").style.right = "";
          document.getElementById("Button").style.top = "50%";
      }

Я нахожу этот обман, потому что если я хочу нажать эту кнопку в верхнем правом углу, то когда я объявляю ее на css, я не помещаю свойство left, но поскольку его начальная позиция находится слева, я должен объявить его. Я попытался установить его на "", но он не работает. То, что я знаю, работает, кнопка перемещается вверх / вниз после нажатия кнопки,}

Answer 1

Это простой пример того, как переключать классы в vanilla JS. Затем вы просто делаете стили с помощью CSS.

// Cache the DOM element for continued use
var btn = document.getElementById("btn");

// Attach event listener to button for 'click' event
btn.addEventListener("click", () =>

{
  // Where we see if it has the class or not
  
  // Is it inactive?
  if (!btn.classList.contains("active"))
    {
      console.log("Added");
      btn.classList.add("active");
    } else // If it *is* currently active
    {
      console.log("Removed");
      btn.classList.remove("active");
    }
});

.btn {
  padding: 1rem;
  width: 200px;
  transition: all 300ms ease-in-out;
}

.btn.active {
  padding: 2rem;
  width: 400px;
}

<button class="btn" id="btn">Click Me</button>

По сути, вы используете класс CSS в качестве цели для различных стилей и просто используете JS для включения класса / выкл. Таким образом, вы можете просто отредактировать класс 'toggle' в CSS так, как вам нравится, и код всегда будет работать. Обычно это то, что мы используем для липких навигационных панелей и т. Д. c. Вы просто добавляете / удаляете другой класс, и это переопределяет стиль по умолчанию.