요소에 대한 유형 스크립트에서 여러 CSS 스타일 속성을 설정하는 방법은 무엇입니까?

요소에 대한 유형 스크립트에서 여러 CSS 스타일 속성을 설정하는 방법은 무엇입니까?

아래 스니펫을 고려해 주십시오.나는 타입스크립트에서 여러 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'});

그러나 인덱스 식이 'number' 유형이 아니기 때문에 Element가 암시적으로 'any' 유형을 가지고 있기 때문에 위의 코드에서 오류(tslint)가 발생합니다. (속성) HTMLlement.style: CSSStyleDeclaration.

제발 도와주세요!!!

사용해 보십시오.setAttributeTypeScript에 다음이 없습니다.style에 대한 재산.Element.

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

이번 GitHub 호 관련 논의: https://github.com/Microsoft/TypeScript/issues/3263

파티에 조금 늦었지만 어쨌든...

실제 문제는 그것이 아닙니다.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.tsTypeScript 설치 시 선언 파일은 TypeScript 설치에 있습니다.거기서 찾을 수 있습니다.CSSStyleDeclaration.

그래서 당신이 할 수 있는 것은 단순히any이와 같이:

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

최상의 해결책은 아니지만 효과적이고 간단합니다.또한 사용할 때 필요한 것처럼 스타일을 문자열화할 필요가 없습니다.element.setAttribute.

이것이 당신이나 다른 누군가에게 도움이 되길 바랍니다.

다음을 사용하여 이를 달성할 수 있습니다.HTLMDivElement그리고CSSStyleDeclaration그 안에 포함되어 있습니다.

var container: HTMLDivElement;

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

이는 다음에서 상속되는 다른 클래스에도 적용됩니다.HTMLElement그리고.style속성(예:HTMLBodyElement.

당신이 찾고 있던 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'});

이것을 단일 요소에 사용하고 동적으로 만들기 위해 반복할 수 있습니다.

let el: HTMLElement = document.getElementById('elementID');

el.style.height = "500px";

이 문제는 2016년 6월 6일에 게시되었습니다， 유형 스크립트 2.1RC는 문제를 해결할 수 있는 새로운 기능을 갖춘 2016년 11월 9일에 출시되었습니다.

Typescript 핸드북과 for dom style 선언을 읽고 다음 코드와 같이 dom stypescript 선언에 문자열 인덱스 서명이 누락된 이 문제의 키를 발견했습니다.

interface CSSStyleDeclaration {
  accentColor: string;
  alignContent: string;
  // ....
  [index: number]: string;
}

문제를 해결하려면 다음과 같이 해야 합니다.

interface CSSStyleDeclaration {
  accentColor?: string;
  alignContent?: string;
  // ....
  [index: number]: string;
  [propName: string]: string;
}

Utility Types를 사용하여 스타일에 대한 새 Type을 생성했는데 다음과 같이 작동했습니다.

type styleDeclaration = Partial<CSSStyleDeclaration> & { [propName: string]: string };

자세한 내용은 이 데모를 참조하십시오.

type styleDeclaration = Partial<CSSStyleDeclaration> & { [propName: string]: string };

const dom = document.createElement('div');

const styleObj: styleDeclaration = { width: '100px', height: '200px' };

Object.keys(styleObj).forEach((styleKey: string) => {
  (dom.style as styleDeclaration)[styleKey] = styleObj[styleKey];
});

안전하지 않은/입력되지 않은 방법:

const e = document.createElement("div")
Object.assign(e.style, {borderSize: "1rem", verticalAlign: "middle"})

즉, 작 을 수 CSS 스 을 로 TypeScript 합 니 다 야 해 환 변 으 대 안 이 이 업 름 타 일 려 면 하 행font-size대 대fontSize例경:이름은 가 없을 입니다.잘못된 스타일 이름에 오류가 발생하지 않습니다. {attrFOO: "bar"}유효합니다.

언급URL : https://stackoverflow.com/questions/37655393/how-to-set-multiple-css-style-properties-in-typescript-for-an-element