26

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

请帮我 ！！！

4

6 回答 6

47

尝试使用setAttribute. TypeScript 没有styleon 属性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——这很令人困惑。

但是，错误消息意味着您正在尝试使用[]带有错误类型索引的下标运算符访问属性。在您的情况下，您的keyis 是 type string，但HTMLElement.style它是一个CSSStyleDeclaration具有索引签名的对象，[index: number]: string因此需要您的 key 是 type number。

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

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

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

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

于 2018-05-24T09:47:54.870 回答
7

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

您可以使用 aHTLMDivElement和其中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 回答
1

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

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

el.style.height = "500px";
于 2021-03-24T13:27:51.980 回答
0

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

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

您需要将标准 CSS 样式命名转换为 TypeScript 替代品才能正常工作。即font-size与fontSize.. 请注意：您不会收到错误样式名称的错误。{attrFOO: "bar"}已验证。

于 2021-02-12T23:04:10.307 回答