更改使用Javascript給出的CSS Div位置值％

Question

我希望能夠單擊按鈕並更改以％爲單位給出的div值，以便在單擊按鈕時將div移出屏幕。

但是，下面的代碼在點擊按鈕時不會產生結果。我非常感謝我能得到的任何建議。

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

解決方案1：我建議你刪除if語句。它沒有任何好處。

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>

解決方案2：添加一個類的名稱，而不是所有的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

不能從.style.left檢索值，你需要做到以下幾點：

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