javascript - 如何使用 JavaScript 获取 CSS 样式并更改值

Question

我想把窗口右端的图片移到左边。 当我自己写left和top值的时候，是可以的，但是我想读取这些值，而不是自己输入。

javascript代码

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;

  }
}

CSS 代码

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

Answer 1

使用 parseInt 获取顶部和左侧的整数值，不带 'px':

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