正如我在標題中所寫，當用戶點擊正方形時，它應該向右移動 100px，下一次點擊后它應該再次向右移動 100px，但正方形會回到左邊。我怎樣才能解決這個問題？
同樣在 JSFiddle 代碼中，但是當我在 Chrome 上打開它時，它給了我錯誤：
無法讀取 null 的屬性（正在讀取 'addEventListener'）
<html>
<head>
<title>JavaScript animation</title>
<style>
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
#square.active {
left: calc(100px);
transition: left 1.5s ease-in-out;
}
</style>
<script>
const square = document.querySelector('#square');
square.addEventListener('click', toggleActive);
function toggleActive() {
square.classList.toggle('active');
}
</script>
</head>
<body>
<div id="square"></div>
</body>
</html>
JS小提琴鏈接
uj5u.com熱心網友回復：
現在你只是簡單地切換類，所以它向右移動并回傳到它的原始位置。
您需要為現有值添加一個值，在本例中為 100 像素。
也沒有從你原來的小提琴中得到錯誤。
const square = document.querySelector('#square');
square.addEventListener('click', moveRight);
function moveRight() {
square.style.left = square.offsetLeft 100 'px';
}#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}<div id="square"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418309.html
標籤：
上一篇：CSSPositionMaterialUI選單項在其父項下方
下一篇：css的鏈接不與html連接