Question

请考虑以下代码段。我需要在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'});

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

请帮帮我!!!

Answer 1

尝试使用setAttribute。 TypeScript在style上没有Element属性。

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

此GitHub问题中的一些相关讨论： https://github.com/Microsoft/TypeScript/issues/3263

Answer 2

派对迟到了一点，但无论如何......

实际问题不在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安装中的typescript/lib/lib.dom.d.ts声明文件。在那里你会找到CSSStyleDeclaration。

所以你可以做的只是简单地转换为any：

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

这不是最好的解决方案，但它有效并且很简单。当您使用element.setAttribute时，它也不需要您对样式进行字符串化。

Answer 3

我希望这可以帮助你或其他人......

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

var container: HTMLDivElement;

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

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

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";

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

6 个答案: