JavaScript - 在点击时递增地重新定位 DIV

Question

非常简单的代码，非常简单的问题。按下链接时，它会向上或向下移动一个 div。但是，我无法让它逐步移动。我知道这是一个简单的语法错误，但谷歌并没有透露我的方式的错误。有谁愿意赐教吗？

<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom -='167px';">&laquo;</a>

<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom +='167px';">&raquo;</a>

我已经有了它，所以 div 会垂直平铺，所以我不担心它会“太高”或“太低”

这是现在的样子:drainteractive.com/FBD/projects.php

Answer 1

您必须从包含 px 的字符串中解析值

// Increase by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) + 167) + ' px'

// Decrease by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) - 167) + ' px'

// Abstracted
function addToBottom(el, amount) {
   // You probably add lower and upper bound check conditions
   el.style.bottom = (parseInt(el.style.bottom) + amount) + ' px';
}

var el = document.getElementById('innerscroll');
addToBottom(el, 167);
addToBottom(el, -167);

还要确保它适用于最初未设置底部的情况

var currentBottom = parseInt(document.getElementById('innerscroll').style.bottom) || 0;