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

Question

我想把图片从窗口的右端移到左边。当我自己写左值和上值时，它有效，但我想读取这些值，而不是自己输入它们。

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'));