how to set multiple CSS style properties in typescript for an element?

I hope this helps you or someone else...

You can achieve this using a HTLMDivElement and the CSSStyleDeclaration contained within it. eg.

var container: HTMLDivElement;

container.style.color = "red";
container.style.fontSize = "12px";
container.style.marginTop = "5px";

This also applies to other classes that inherit from HTMLElement and have a style property (for example HTMLBodyElement.

Just a little late to the party, but anyway...

The actual problem is not that style is not defined on Element. The word Element at the beginning of Element implicitly has an 'any' type because index expression is not of type 'number'. (property) HTMLElement.style: CSSStyleDeclaration is just the first word in a sentence and therefore uppercased. Means it does not relate in any way to the Element object - which is quite confusing.

However, the error message means that you are trying to access a property using the subscript operator [] with an incorrectly typed index. In your case your key is of type string but HTMLElement.style is a CSSStyleDeclaration object which has an index signature of [index: number]: string and consequently requires your key to be of type number.

The index signature comes from the typescript/lib/lib.dom.d.ts declaration file in your TypeScript installation. There you will find CSSStyleDeclaration.

So what you can do is simply cast to any like so:

(<any>element.style)[key] = attr[key];

It's not the best solution but it works and is straightforward. It also does not require you to stringify your styles like it would be necessary when you use element.setAttribute.

Try using setAttribute. TypeScript does not have the style property on Element.

element.setAttribute("style", "color:red; border: 1px solid blue;");

Some related discussion in this GitHub issue: https://github.com/Microsoft/TypeScript/issues/3263