使用Java更改以％为单位给出的CSS Div位置值

Question

I want to be able to click a button and change a div value given in % to move the div off screen at the click of a button.

However, the code below produces no result when the button is clicked. I really appreciate any advice I can get.

 function Shift() { var x = document.getElementById("Lac"); if (x.style.left === "0%" && x.style.top === "0%") { x.style.left = "100%"; x.style.top = "100%"; } } 

 #Lac { position: absolute; width: 100%; height: 100%; z-index: 2; left: 0%; top: 0%; background-color: #0062FF; transition-duration: 0.3s; } 

 <div id="Lac"> <button onclick="Shift()">Button</button> </div> 

Answer 1

Solution 1: I suggest you remove the if-statement. It doesn't do any good.

 function Shift() { var x = document.getElementById("Lac"); x.style.left = "100%"; x.style.top = "100%"; } 

 #Lac { position: absolute; width: 100%; height: 100%; z-index: 2; left: 0%; top: 0%; background-color: #0062FF; transition-duration: 0.3s; } 

 <div id="Lac"> <button onclick="Shift()">Button</button> </div> 

Solution 2: Add a className instead of all that JavaScript.

 #Lac { position: absolute; width: 100%; height: 100%; z-index: 2; left: 0%; top: 0%; background-color: #0062FF; transition-duration: 0.3s; } #Lac.hide { left: 100%; top: 100%; } 

 <div id="Lac"> <button onclick="this.parentNode.className='hide';">Button</button> </div> 

Answer 2

You cannot retrieve the value from .style.left you need to do the following:

 var style = window.getComputedStyle(document.getElementById("Lac"))
 console.log(style.left); //outputs 0px
 var left = parseInt(style.left); //0
if ( !left ){
    //do the animation
}