我的按钮没有通过 javascript DOM 从左侧移动到右上角

Question

I have button in html that is on the middle left of the screen, that button is styled such as:

  .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;
  }

now when i click this button i want it to transfer to the upper right and when i click again it should go back to its original position. In Javascript the button is handled as so:

    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%";
      }

I find this tricking because if i want to play that button on the upper right corner is when i declare it on css i dont place the left property but since its initial position is in the left i have to declare it. I tried setting it to "" but it does not work. What i know works is the button moves up/down upon clicking the button, }

Answer 1

This is a simple example of how to toggle classes in vanilla JS. Then, you just do your styling via 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>

Essentially, you're using a CSS class as a target for the different styling and just using JS to turn the class on/off. That way, you can just edit the 'toggle' class in CSS to whatever you want and the code will always work. This is usually what we use for sticky navbars, etc. You just add/remove another class, and that overrides the default styling.