每次點擊增加style.marginLeft？

-1

我正在用JavaScript構建一個基本滑塊。每次單擊按鈕時，div滑塊應增加其margin-left "-100px"。每次點擊增加style.marginLeft？

我有這樣的代碼：

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來實現這一點，而不產生額外的變量，將舉行保證金價值？

謝謝！

來源

2016-01-30 PixelPusher

參考[該解決方案（http://stackoverflow.com/questions/2781887/how-to-increase-decrease-current-margin-at-a-number-by-jquery）你可能會得到解決！ –

該屬性是一個字符串，所以你首先需要閱讀它，解析它爲一個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';

但這種解決方案，同時它不具有可變持有的價值，是一個線ISN這很好，因爲它調用getElementById兩次以獲得相同的值。

來源

2016-01-30 13:45:39 AtheistP3ace

您可以使用parseInt函數從marginLeft字符串中刪除px。第一個參數是輸入字符串，第二個參數是基數。

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

來源

2016-01-30 13:55:40

每次點擊增加style.marginLeft？

回答

相關問題