26

以下のスニペットを検討してください。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'});

ただし、上記のコードは、インデックス式が「数値」型ではないため、要素が暗黙的に「任意」型であるため、error(tslint) をスローします。(プロパティ) HTMLElement.style: CSSStyleDeclaration.

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

4

6 に答える 6

47

を使ってみてくださいsetAttribute。styleTypeScript にはon プロパティがありませんElement。

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

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

于 2017-05-24T02:23:50.957 に答える
10

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

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

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

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

したがって、できることは、any次のようにキャストするだけです。

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

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

于 2018-05-24T09:47:54.870 に答える
7

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

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

var container: HTMLDivElement;

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

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

于 2016-06-21T14:20:43.887 に答える
7

探していた 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'});
于 2018-10-19T10:01:02.440 に答える