为什么CSS样式会那样？

Question

我基于Pluralsight上的“ Scott Allen使用RxJS进行响应式编程入门”，使用angular-cli创建了一个小型应用程序。它从鼠标创建可观察的事件流。没什么-数据流很好用。唯一的问题是样式对我来说是一种怪异的方式。它们仅以未知方式更新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