javascript - 纯js如何给内联样式添加像素

Question

如果我点击“vs-nav-right”或“vs-nav-left”，我喜欢在“vs-wrapper”的背景位置添加/子像素。

我喜欢用纯 JavaScript 来做这件事，所以不用 JQuery。

代码示例:

 <div class="vs-wrapper" style="background-position: 0% 0%;"></div>

 <ul>
     <li class="vs-nav-right"></li>
     <li class="vs-nav-left"></li>
 </ul>

如果点击“vs-nav-right”，我喜欢给后面元素的背景位置加50px

<div class="vs-wrapper" style="background-position: 50px 0;"></div>

再次点击“vs-nav-right”，我喜欢多加50px

<div class="vs-wrapper" style="background-position: 100px 0;"></div>

与“vs-nav-left”相同，但我喜欢减去 50px 而不是添加 50px

<div class="vs-wrapper" style="background-position: -50px 0;"></div>

Answer 1

你可以简单地这样做:-

$(document).on('click','.vs-nav-right',function(){
  var m = document.getElementsByClassName("vs-wrapper");
  var c = m[0].style;

  if(c.backgroundPositionX == "0%")
    c.backgroundPositionX = "0px";

  c.backgroundPositionX = parseInt(c.backgroundPositionX) + 50 + 'px';

});

$(document).on('click','.vs-nav-left',function(){
  var m = document.getElementsByClassName("vs-wrapper");
  var c = m[0].style;

  if(c.backgroundPositionX == "0%")
    c.backgroundPositionX = "0px";

  c.backgroundPositionX = parseInt(c.backgroundPositionX) - 50 + 'px';

});