Trying to assign a value to CSS in typescript doesn't work

Question

I have script that is taking a HTMLElement and the css.top and css.marginLeft of an element which refuses to set the properties in TypeScript.

here's my code:

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

Here's how I'm getting the values and "trying" to set the properties.

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

What's happening is:

moveable1.style.marginLeft and moveable1.style.top ALWAYS equals ""

I don't understand.

The console logs are reporting the correct values

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

Thoughts, anyone?

UPDATE:

Zeh suggested the solution:

I modified it a wee bit...

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

THANK YOU ZEH!

Are chatScrollTop, boxScrollTop, etc coming as strings? There's way too many conversions there, some of them guaranteed to be unnecessary (String(), parseInt(), etc). — zeh
– zeh, Commented Feb 13, 2019 at 3:11

zeh · Accepted Answer · 2019-02-12 23:56:36Z

1

You're setting a style property to a number and then trying to re-read and convert it to a string. This doesn't work; top (et al) cannot be numbers therefore they're kept at their previous value("").

Also, you need units ("px", "pt", etc) when setting a style, otherwise it won't set either, even if it's a string. Hence when you try converting them from number to string you get another blank 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);

This is not a TypeScript problem, this is a JavaScript (rather, a DOM) "problem".

My suggestion is to simplify this code. It's not just hard to read, it's doing a lot that it shouldn't be doing - unnecessary conversions, depending on assignment side effects, etc.

Something like this should work:

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

edited Feb 12, 2019 at 23:56

answered Feb 12, 2019 at 23:54

zeh

10.8k3 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zeh Over a year ago

Cool, happy to know it worked! And no need to update the question with answers or callouts to anyone - really, the posted answers are enough. Sometimes newer answers even become available and are a better fit. That is to say, don't be surprised if someone modifies it to be more clearly readable for other users in the future.

Collectives™ on Stack Overflow

Trying to assign a value to CSS in typescript doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related