Question

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

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

<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom +='167px';">»</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;

Answer 2

+='167px'将连接它，它将变为'167px167px167px167px167px'。不确定会导致-='167px'的结果，但可能会导致错误。

Answer 3

你需要从字符串中删除'px'，将（？）转换为int，然后从中减去。

onclick="var mElem = document.getElementById('innerScroll'); mCur = parseInt(mElem.style.bottom.replace('px', 0)); mElem.style.bottom = (mCur-167)+'px'"

当然，这应该全部放入一个单独的函数中，然后在onclick中调用，而不是上面的怪物。

function moveUp()
{
var mElem = document.getElementById('innerScroll'); 
var mCur = parseInt(mElem.style.bottom.replace('px', 0)); 
mElem.style.bottom = (mCur-167)+'px';
}

...

<strike>onlick="moveUp()"</strike>
onclick="moveUp()"

我的思想一定是在其他地方......

JavaScript - 在onClick上逐步重新定位DIV

3 个答案: