Question

我正在用JavaScript构建一个基本滑块。每次单击按钮时，div幻灯片都应增加margin-left "-100px"。

我有这段代码：

document.getElementById('core-next').onclick = function() {
    document.getElementById('slides').style.marginLeft = "-100px";
}

它的工作方式是当我点击#core-next页边距设置为-100px时。但我想要实现的是，每次单击按钮，边距都会增加-100px。

看起来像是：-100px, -200px, -300px...

纯JavaScript可以实现吗？ jQuery有"+="！我可以在Javascript中添加额外的变量吗？

我试过了：

document.getElementById('core-next').onclick = function() {
    document.getElementById('slides').style.marginLeft -= 200 + 'px';
}

但它不起作用......

有没有办法在JavaScript中实现这一点，而无需创建可保留边际值的其他变量？

谢谢！

Answer 1

该属性是一个字符串，因此首先需要读取它，将其解析为int，然后更改该值并重置它。像这样：

document.getElementById('core-next').onclick = function() {
    var slides = document.getElementById('slides');
    // Read it and parse to an int
    var marginLeft =  parseInt(slides.style.marginLeft, 10);
    // Subtract value, add pixel back in and reset property
    slides.style.marginLeft = (marginLeft - 100) + 'px';
}

如果你真的需要一行，你可以这样做：

document.getElementById('slides').style.marginLeft = (parseInt(document.getElementById('slides').style.marginLeft, 10) - 100) + 'px';

但是这个解决方案虽然它没有一个保持值的变量并且是一行并不是很好，因为它为相同的值调用了两次getElementById。

Answer 2

你可以使用parseInt函数从marginLeft字符串中删除px。第一个参数是输入字符串，第二个参数是基数。

var slides = document.getElementById('slides');
document.getElementById('core-next').onclick = function() {
    slides.style.marginLeft = (parseInt(slides.style.marginLeft, 10) - 100) + 'px';
}

每次点击都会增加style.marginLeft？

2 个答案: