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

Question

请考虑以下 sn-p。我需要在打字稿中设置多个 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 隐含地具有“任何”类型，因为索引表达式不是“数字”类型。 (属性) 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";