How to get CSS style using JavaScript and change value

Question

I want to move the picture from the right end of the window to the left. When I write the left and top values myself, it works, but I want to read these values, and not enter them myself.

The javascript code

window.addEventListener('keydown', f, false);
window.addEventListener('keyup', f, false);
var img = document.getElementById("img_main");

var left = 1020;
var topw = 50;
console.log(left);
console.log(topw);

function f(e) {
  switch (e.keyCode) {
    case 38:
      topw -= 10;
      img.style.top = topw + 'px';
      break;
    case 40:
      topw += 10;
      img.style.top = topw + 'px';
      break;
    case 39:
      left += 10;
      img.style.left = left + 'px';
      break;
    case 37:
      left -= 10;
      img.style.left = left + 'px';
      break;

  }
}

the CSS code

#img_main {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 1020px;
  top: 50px;
}

@Andreas var style = window.getComputedStyle(img); var left=style.getPropertyValue('left'); var topw=style.getPropertyValue('top'); I did it, but the block does not move — Yura Khomitsky
– Yura Khomitsky, Commented Oct 12, 2019 at 8:42
It should be easy to find a way how to convert a string into a real number. — Andreas
– Andreas, Commented Oct 12, 2019 at 8:59

François Huppé · Accepted Answer · 2019-10-12 08:58:16Z

2

Use parseInt to get the top and left value as integer, without the 'px':

   var style = window.getComputedStyle(img); 
   var left=parseInt(style.getPropertyValue('left')); 
   var topw=parseInt(style.getPropertyValue('top'));

answered Oct 12, 2019 at 8:58

François Huppé

2,1161 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get CSS style using JavaScript and change value

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related