为什么css样式表现那样？

Question

我使用angular-cli创建了一个小应用程序，基于在Pluralsight上使用Scott Allen的RxJS“反应式编程入门”。它从鼠标创建Observable事件流。没什么好看的 - 数据流很好用。唯一的问题是风格以奇怪的方式应用于我。他们以未知的方式更新div 2次。它们被更改为0px - 一次用于x，一次用于y轴，当我在一个圆形区域中移动鼠标时。有一次就是这样。我在开发人员工具中手动更改了这些属性，它的工作原理应该如此。但无法自动处理此行为。

css html

#circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
}

<div id="circle"></div>

打字稿

ngOnInit() {
  let circle = document.getElementById('circle')
  let mouse = fromEvent(document, 'mousemove')
    .pipe(
      map((e: MouseEvent) => {
        return {
          x: e.clientX,
          y: e.clientY
        }
      }),
    )

  function onNext(value) {
    circle.style.left = value.x
    circle.style.top = value.y
    console.log("xy", value.x, value.y)
  }

  mouse.subscribe(
    value => onNext(value),
    e => console.log(`error: ${e}`),
    () => console.log('complete.')
  )

}

Answer 1

将'px'添加到值：

function onNext(value) {
        console.log(circle.style.left)
        circle.style.left = value.x + 'px'
        circle.style.top = value.y + 'px'
        console.log("xy", value.x, value.y)
      }

并且圆圈将通过鼠标改变位置。 DEMO