comment définir plusieurs propriétés de style CSS à la machine pour un élément?

Veuillez considérer l'extrait de code ci-dessous. j'ai besoin de définir plusieurs propriétés CSS en caractères d'imprimerie. pour ce que 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 j'ai besoin de passer les paramètres de la

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

Mais le code ci-dessus déclenche une erreur(tslint) comme Élément a implicitement un "tout" type en raison de l'indice de l'expression n'est pas de type "nombre".
(propriété) HTMLElement.style: objet CSSStyleDeclaration.

S'il vous plaît aider moi !!!

erreur renvoyée dans cette ligne .......... de l'élément.style[key]

OriginalL'auteur Srinivasan Natarajan | 2016-06-06

  1. 16

    Essayez d'utiliser setAttribute. La machine n'a pas le style bien sur Element.

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

    Certains sont liés à un débat dans ce GitHub question:
    https://github.com/Microsoft/TypeScript/issues/3263

    Hey @srinivasan-natarajan, si cela ne fonctionne pas, veuillez cocher que l'on a accepté la réponse, merci!
    Cela devrait totalement être marqué comme acceptée réponse, merci pour l'aide @theUtherSide 😀
    Ce code a pour effet de bord, qu'il tue toutes les anciennes définitions de style.
    C'est vrai! Vous auriez besoin d'utiliser element.getAttribute('style') et de fusionner les deux ensemble pour maintenir les styles.

    OriginalL'auteur theUtherSide

  2. 3

    Juste un peu en retard à la fête, mais de toute façon...

    Le réel problème n'est pas que style n'est 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 est juste le premier mot d'une phrase et, par conséquent, en majuscule. Signifie qu'elle n'est pas liée de quelque façon à l' Element de l'objet qui est assez déroutant.

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

    L'indice de signature vient de la typescript/lib/lib.dom.d.ts déclaration de fichier dans votre Tapuscrit de l'installation. Vous y trouverez CSSStyleDeclaration.

    Ce que vous pouvez faire est tout simplement jeté à any comme suit:

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

    C'est pas la meilleure solution mais ça marche et c'est simple. Il ne vous oblige pas à stringify vos styles, comme il serait nécessaire lorsque vous utilisez element.setAttribute.

    BTW: Est-ce que quelqu'un sait pourquoi le CSSStyleDeclaration en caractères d'imprimerie du fichier de déclarations a que le numéro d'index de base de signature au lieu d'une chaîne? Ne fait pas de sens pour moi.
    Il reflète le navigateur. Essayez: myElement.style[0] pour accéder à la première de style de myElement.

    OriginalL'auteur freakazoid_em

  3. 2

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

    Vous pouvez atteindre cet objectif en utilisant un HTLMDivElement et la CSSStyleDeclaration. par exemple.

    var container: HTMLDivElement;

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

    Cela s'applique également à d'autres classes qui héritent de HTMLElement et ont un style de propriété (par exemple HTMLBodyElement.

    peut être pour certains un. pas pour mon scénario..:)

    OriginalL'auteur ozOli

  4. 1

    L'API vous avez été la recherche pour: 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 permis dans les clés de l'objet, afin de l'utiliser ici, trop:

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

    OriginalL'auteur HolgerJeromin