如何在打字稿中为一个元素设置多个 CSS 样式属性？

Question

请考虑以下代码段。我需要在打字稿中设置多个 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'});

但是上面的代码抛出错误（tslint），因为 Element 隐式具有 'any' 类型，因为索引表达式不是 'number' 类型。 (属性) HTMLElement.style: CSSStyleDeclaration.

请帮帮我！！！

Answer 1

希望这对您或其他人有所帮助...

您可以使用 HTLMDivElement 和其中包含的 CSSStyleDeclaration 来实现此目的。例如

var container: HTMLDivElement;

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

这也适用于继承自 HTMLElement 并具有 style 属性的其他类（例如 HTMLBodyElement.

Answer 2

尝试使用 setAttribute。 TypeScript 在 Element.

上没有 style 属性

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

本 GitHub 期的一些相关讨论： https://github.com/Microsoft/TypeScript/issues/3263

Answer 3

聚会有点晚了，但无论如何...

实际问题不是 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 是一个 CSSStyleDeclaration 对象，其索引签名为 [index: number]: string 因此需要您的密钥输入 number.

索引签名来自 TypeScript 安装中的 typescript/lib/lib.dom.d.ts 声明文件。在那里你会发现 CSSStyleDeclaration.

所以你可以做的就是像这样简单地转换为 any：

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

这不是最佳解决方案，但它有效且简单明了。它也不需要像使用 element.setAttribute.

时那样对样式进行字符串化

Answer 4

您搜索的 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'});

Answer 5

一种不安全/无类型的方式：

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

您需要将标准 CSS 样式命名转换为 TypeScript 替代方案才能正常工作。即 font-size 与 fontSize。警告：你不会在错误的样式名称上得到任何错误。 {attrFOO: "bar"}有效。

Answer 6

您可以将它用于单个元素，并对其进行迭代以使其动态化

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

el.style.height = "500px";

Answer 7

这个问题是post 06 Jun 2016，Typescript 2.1RC 是2016年11月9日发布的，有新功能解决了这个问题

阅读Typescript handbook and declaration for dom style后，我找到了这个问题的关键，即在 dom 样式的 Typescript 声明中缺少字符串索引签名，如下代码所示：

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

应该是这样的（这样才能解决问题）：

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

我使用 Utility Types 为样式创建了一个新的类型并且它起作用了：

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

如果你想了解更多，可以看看这个demo。

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];
});

如何在打字稿中为一个元素设置多个 CSS 样式属性？

how to set multiple CSS style properties in typescript for an element?

css

typescript

tslint

这个问题是post 06 Jun 2016，Typescript 2.1RC 是2016年11月9日发布的，有新功能解决了这个问题