Попытка присвоить значение CSS в машинописи не работает

Question

У меня есть скрипт, который принимает HTMLElement и css.top и css.marginLeft элемента, который отказывается устанавливать свойства в TypeScript.

вот мой код:

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";