web-dev-qa-db-ja.com

要素のTypeScriptで複数のCSSスタイルプロパティを設定する方法は？

以下のスニペットを検討してください。 TypeScriptで複数のCSSプロパティを設定する必要があります。そのために、以下のコードを試しました。

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

上記のコードでは、パラメータを次のように渡す必要があります

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

ただし、インデックス式のタイプが「数値」ではないため、Elementには暗黙的に「any」タイプがあるため、上記のコードはエラー（tslint）をスローします。 （プロパティ）HTMLElement.style：CSSStyleDeclaration。

私を助けてください ！！！

csstypescripttslint
9
Srinivasan Natarajan

setAttributeを使用してみてください。 TypeScriptには、styleにElementプロパティがありません。

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

このGitHubの問題に関連する議論： https://github.com/Microsoft/TypeScript/issues/326

24
theUtherSide

パーティーに少し遅れましたが、とにかく...

実際の問題は、styleでElementが定義されていないことではありません。 Element implicitly has an 'any' type because index expression is not of type 'number'. (property) HTMLElement.style: CSSStyleDeclarationの先頭にある単語Elementは、文の最初の単語であるため、大文字になります。 Elementオブジェクトとはまったく関係がないことを意味します-これは非常に紛らわしいです。

ただし、エラーメッセージは、誤って入力されたインデックスで添え字演算子[]を使用してプロパティにアクセスしようとしていることを意味します。あなたの場合、あなたのkeyはstring型ですが、HTMLElement.styleは[index: number]: stringのインデックス署名を持つCSSStyleDeclarationオブジェクトであり、そのためキーが必要ですタイプはnumberになります。

インデックス署名は、TypeScriptインストールのTypeScript/lib/lib.dom.d.ts宣言ファイルから取得されます。そこにCSSStyleDeclarationがあります。

そのため、次のようにanyにキャストするだけです。

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

これは最善の解決策ではありませんが、機能し、簡単です。また、element.setAttributeを使用する場合に必要になるような、スタイルを文字列化する必要もありません。

5
eddipedia

検索していたAPIは次のとおりです。 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]);
        });
    }
}

また、オブジェクトキーではハイフンは使用できないため、ここでも 'を使用します。

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

これがあなたや他の誰かに役立つことを願っています...

HTLMDivElementとそれに含まれるCSSStyleDeclarationを使用してこれを実現できます。例えば。

var container: HTMLDivElement;

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

これは、HTMLElementから継承し、styleプロパティを持つ他のクラスにも適用されます（たとえば、HTMLBodyElement。

3
ozOli