Question

我有一个脚本，该脚本使用HTMLElement以及拒绝在TypeScript中设置属性的元素的css.top和css.marginLeft。

这是我的代码：

let moveable1: HTMLElement = document.getElementsByClassName('moveable1')[0] as HTMLElement;

这是我获取值并“尝试”设置属性的方式。

console.log("**style.top** = " + (moveable1.style.top = 
String((+this.chatScrollTop + +this.boxScrollTop).toFixed(0))));
console.log("**style.marginLeft** = " + (moveable1.style.marginLeft = String((+this.chatScrollLeft + +this.boxScrollLeft).toFixed(0))));

moveable1.style.top = String(moveable1.style.top);
moveable1.style.marginLeft = String(moveable1.style.marginLeft);

正在发生的事情：

moveable1.style.marginLeft和moveable1.style.top始终等于“”

我不明白。

控制台日志报告正确的值

style.top = 69
style.marginLeft = 100
top: **<<<=== "EMPTY"** and should be 69
marginLeft: **<<<=== "EMPTY"** and should be 100

有什么想法吗？

更新：

Zeh建议解决方案：

我有点修改了...

  let top = +this.chatScrollTop + +this.boxScrollTop;

  const marginLeft = this.chatScrollLeft + this.boxScrollLeft;

  moveable1.style.top = top.toFixed(0) + "px";
  moveable1.style.marginLeft = String(parseInt(marginLeft).toFixed(0)) + "px";

  console.log("top: " + moveable1.style.top);
  console.log("marginLeft: " + moveable1.style.marginLeft);

谢谢！

Answer 1

您正在将样式属性设置为数字，然后尝试重新读取并将其转换为字符串。这行不通； top（通常）不能为数字，因此它们将保持其先前的值（""）。

此外，设置样式时需要单位（“ px”，“ pt”等），否则即使设置为string也不会设置单位。因此，当您尝试将它们从数字转换为字符串时，会得到另一个空白字符串。

// This returns 1
console.log(document.body.style.top = 1);

// Nevertheless, it didn't work, since this returns ""
console.log(document.body.style.top);

这不是TypeScript问题，这是JavaScript（而不是DOM）“问题”。

我的建议是简化这段代码。不仅很难阅读，而且还做了很多不应该做的事情-不必要的转换，具体取决于赋值的副作用等。

类似的事情应该起作用：

const top = this.chatScrollTop + this.boxScrollTop;
const marginLeft = this.chatScrollLeft + this.boxScrollLeft;

moveable1.style.top = top.toFixed(0) + "px";
moveable1.style.marginLeft = marginLeft.toFixed(0) + "px";

尝试在打字稿中为CSS分配值不起作用

1 个答案: