web-dev-qa-db-fra.com

comment définir plusieurs propriétés de style CSS dans TypeScript pour un élément?

Veuillez considérer l'extrait ci-dessous. J'ai besoin de définir plusieurs propriétés CSS dans TypeScript. pour cela j'ai essayé le code ci-dessous.

public static setStyleAttribute(element: HTMLElement, attrs: { [key: string]: Object }): void {
        if (attrs !== undefined) {
            Object.keys(attrs).forEach((key: string) => {
                element.style[key] = attrs[key];
            });
        }
    }

pour le code ci-dessus, je dois passer les paramètres comme

let elem: HTMLElement = document.getElementById('myDiv');
setStyleAttribute(elem, {font-size:'12px', color : 'red' , margin-top: '5px'});

Mais le code ci-dessus génère une erreur (tslint), car Element comporte implicitement un type "quelconque", car l'expression d'index n'est pas du type "numéro" .

Aidez-moi, s'il vous plaît !!!

csstypescripttslint
4
Srinivasan Natarajan

Essayez d'utiliser setAttribute. TypeScript n'a pas la propriété style sur Element.

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

Quelques discussions connexes dans ce numéro de GitHub: https://github.com/Microsoft/TypeScript/issues/3263

16
theUtherSide

Juste un peu tard pour la fête, mais quand même ...

Le problème actuel n’est pas que style ne soit pas défini sur Element. Le mot Element au début de Element implicitly has an 'any' type because index expression is not of type 'number'. (property) HTMLElement.style: CSSStyleDeclaration n'est que le premier mot d'une phrase et est donc mis en majuscule. Cela signifie qu’il n’a aucun lien avec l’objet Element - ce qui est assez déroutant.

Cependant, le message d'erreur signifie que vous essayez d'accéder à une propriété à l'aide de l'opérateur d'indice [] avec un index mal typé. Dans votre cas, votre key est de type string mais HTMLElement.style est un objet CSSStyleDeclaration qui a une signature d'index de [index: number]: string et nécessite par conséquent que votre clé soit de type number.

La signature d'index provient du fichier de déclaration TypeScript/lib/lib.dom.d.ts de votre installation TypeScript. Vous y trouverez CSSStyleDeclaration.

Donc, ce que vous pouvez faire, c'est simplement lancer any comme ceci:

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

Ce n'est pas la meilleure solution mais cela fonctionne et est simple. De plus, cela ne vous oblige pas à hiérarchiser vos styles comme cela serait nécessaire lorsque vous utilisez element.setAttribute.

3
freakazoid_em

J'espère que cela vous aide ou aide quelqu'un d'autre ... 

Vous pouvez y parvenir en utilisant HTLMDivElement et la CSSStyleDeclaration qu'il contient. par exemple.

var container: HTMLDivElement;

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

Ceci s'applique également aux autres classes qui héritent de HTMLElement et ont une propriété style (par exemple HTMLBodyElement.

2
ozOli

L’API que vous recherchiez est: 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]);
        });
    }
}

Et le trait d'union n'est pas autorisé dans les clés d'objet, utilisez donc 'ici aussi:

let elem: HTMLElement = document.getElementById('myDiv');
setStyleAttribute(elem, {'font-size':'12px', color: 'red', 'margin-top': '5px'});
1
HolgerJeromin