使用CSS重置位置

Question

我在CSS中有這個代碼：

#blueToken
{
    top:415px;
    left:35px;
    z-index: 80;
}

#redToken
{
    top:405px;
    left:25px; 
    z-index: 70;
}

完成一場比賽后，一個標記位於“終點線”，另一個標記位於屏幕上的任何位置。 單擊按鈕后，我想重置兩個位置。 （我正在使用JS和jQuery）。

Answer 1

您應該使用具有top, left or z-index property position property top, left or z-index property

也像這樣使用類

.blueToken
{
    top:415px;
    left:35px;
    z-index: 80;
    position:relative;
}

.redToken
{
    top:405px;
    left:25px; 
    z-index: 70;
    position:relative;
}

並使用jquery.toggleClass（） add or remove class 。

這段code可以幫到你，

$('.btn-reset').click(function() {
    $(this).toggleClass('blueToken redToken');
});

Answer 2

假設起始位置與CSS代碼相同，並且您有一個帶有類名btn-reset的按鈕來重置位置。

$('.btn-reset').click(function() {
   $('#blueToken').css({
       top: 415,
       left: 35,
       'z-index': 80
   });
   $('#redToken').css({
       top: 415,
       left: 25,
       'z-index': 70
   });
});