Please consider the below snippet. i need to set multiple CSS properties in typescript. for that i have tried the below code.
public static setStyleAttribute(ele
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
The API you were searching for is: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
public static setStyleAttribute(element: HTMLElement, attrs: { [key: string]: Object }): void {
if (attrs !== undefined) {
Object.keys(attrs).forEach((key: string) => {
element.style.setProperty(key, attrs[key]);
});
}
}
And hyphen is not allowed in object keys, so use ' here, too:
let elem: HTMLElement = document.getElementById('myDiv');
setStyleAttribute(elem, {'font-size':'12px', color: 'red', 'margin-top': '5px'});
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
.
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
.