How to add pixels to inline style with pure js

Question

I like to add/sub pixels to the background-position of "vs-wrapper", if I click on "vs-nav-right" or "vs-nav-left".

I like to do this with pure JavaScript, so no JQuery.

Code example:

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

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

If you click on "vs-nav-right", I like to add 50px to the background position of the following element

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

Click again on "vs-nav-right", I like to add 50px more

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

Same thing with "vs-nav-left", but instead of adding 50px I like to subtract 50px

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

Answer 1

You could simply do this:-

$(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';

});

Answer 2

This works very well for me:

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

<ul>
  <li class="vs-nav-right">Right</li>
  <li class="vs-nav-left">Left</li>
  <li class="vs-nav-up">Up</li>
  <li class="vs-nav-down">Down</li>
</ul>

window.addEventListener('DOMContentLoaded', function() {
  // Get the elements
  var wrapper =  document.querySelector(".vs-wrapper");
  var navRight = document.querySelector(".vs-nav-right");
  var navLeft =  document.querySelector(".vs-nav-left");
  var navUp =    document.querySelector(".vs-nav-up");
  var navDown =  document.querySelector(".vs-nav-down");

  // Pre-styling
  wrapper.style.width = "200px";
  wrapper.style.height = "200px";
  wrapper.style.backgroundImage = "url(http://images.clipartpanda.com/rainbow-clip-art-rainbow.gif)";

  // The main function
  var changeBackgroundPos = function(ix, iy) {
    var vals = wrapper.style.backgroundPosition.split(" ");
    var x = parseInt(vals[0]) + ix + "px";
    var y = parseInt(vals[1]) + iy + "px";
    var newVals = x + " " + y;
    wrapper.style.backgroundPosition = newVals;
  };

  // Adding changeBackgroundPos to each of the .vs-nav things
  navRight.addEventListener('click', function() {
    changeBackgroundPos(-40, 0);
  });
  navLeft.addEventListener('click', function() {
    changeBackgroundPos(40, 0);
  });
  navUp.addEventListener('click', function() {
    changeBackgroundPos(0, 40);
  });
  navDown.addEventListener('click', function() {
    changeBackgroundPos(0, -40);
  });
});

As a bonus it can go up and down as well. ;) Here's the CodePen I used.