how to set multiple CSS style properties in typescript for an element?
Solution 1
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
Solution 2
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
.
Solution 3
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
.
Solution 4
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'});
Solution 5
you can use this for a single element, and iterate over it to make it dynamic
let el: HTMLElement = document.getElementById('elementID');
el.style.height = "500px";
Related videos on Youtube
Srinivasan Natarajan
Updated on April 08, 2022Comments
-
Srinivasan Natarajan over 1 year
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(element: HTMLElement, attrs: { [key: string]: Object }): void { if (attrs !== undefined) { Object.keys(attrs).forEach((key: string) => { element.style[key] = attrs[key]; }); } }
for the above code i need to pass the parameters as
let elem: HTMLElement = document.getElementById('myDiv'); setStyleAttribute(elem, {font-size:'12px', color : 'red' , margin-top: '5px'});
But the above code throws error(tslint) as Element implicitly has an 'any' type because index expression is not of type 'number'. (property) HTMLElement.style: CSSStyleDeclaration.
Please help me !!!
-
Srinivasan Natarajan over 7 yearserror thrown in this line .......... element.style[key]
-
-
Srinivasan Natarajan over 7 yearsmay be for some one. not for my scenario..:)
-
eddipedia over 5 yearsBTW: Does anyone know why the
CSSStyleDeclaration
in TypeScript's declarations file has that number-based index signature instead of a string-based? Makes no sense to me. -
HolgerJeromin about 5 yearsIt reflects the browser. Try:
myElement.style[0]
to access the first style of myElement. -
HolgerJeromin about 5 yearsThis code has the side effect, that it kills all old style definitions.
-
theUtherSide about 5 yearsThat's true! You'd need to use
element.getAttribute('style')
and merge the two together to maintain existing styles. -
evnp over 2 yearsThis should be the accepted answer. TypeScript's CSSStyleDeclaration has number-based indexing (referenced in comments on other answers here) so string keys don't work. setProperty accepts string keys and has the same effect as
style[key] = val
without resorting to unsafe typing. Thanks @HolgerJeromin -
user697576 over 2 yearsHere's the related issue on github github.com/microsoft/TypeScript/issues/17827
-
Geryson almost 2 yearsI've used this with TypeScript / Angular. Normally,
document.getElementById()
can return as anElement
type, make sure you uselet el: HTMLElement = <HTMLElement>document.getElementById('elementID');
to change it. Thanks!