TS2339：类型“元素”上不存在属性“样式”

Question

这是代码：

const test = Array.from(document.getElementsByClassName('mat-form-field-infix'));
test.forEach((element) => {
    element.outerHTML = '<div class="good-day-today" style="width: 0px;"></div>'; // Please note that this line works fine!
    element.style.padding = '10px';
    element.style.borderTop = '0';
});

编译时出现错误：

src/app/ / .component.ts(101,21) 中的错误：错误 TS2339：“元素”类型上不存在属性“样式”。src/app/ / .component.ts(102,21): 错误 TS2339: 类型“元素”上不存在属性“样式”。

我该如何解决？

我试图移除Array.from...零件，尝试使用for of和for in，尝试过as any，但以上是我必须这样做的方式。

Answer 1

你需要一个类型转换：

Array.from(document.getElementsByClassName('mat-form-field-infix') as HTMLCollectionOf<HTMLElement>)

那是因为getElementsByClassName 只返回 HTMLCollection<Element>，并且Element没有style属性。该HTMLElement但是不执行它通过它的ElementCSSInlineStyle扩展接口。

请注意，这种类型转换是类型安全的，因为 everyElement要么是 a 要么是HTMLElementan SVGElement，我希望您的SVG 元素没有类。

Answer 2

另一种选择是使用querySelectorAll和类型参数。getElementsByClassName不是通用的，而是querySelectorAll- 您可以只传递将被选择的元素的类型，如下所示：

const test = document.querySelectorAll<HTMLElement>('.mat-form-field-infix');

这不需要任何类型转换，并且它可以让你使用forEach立即，而不是首先将其转换为一个数组。（getElementsByClassName返回的HTMLCollection，其中没有一个forEach方法querySelectorAll返回一个NodeList，它确实有一个forEach方法，至少在一定程度上最新的浏览器支持古老的浏览器也一样，你需要一个。填充工具，或将其转换为数组优先。）

如果您碰巧只需要一个元素，则可以使用querySelector，这也是通用的：

const elm = document.querySelector<HTMLElement>('.foo')!;
elm.style.padding = '10px';

querySelectorAll(和querySelector) 与许多其他选项相比的另一个好处是它们接受 CSS 选择器字符串，这可以更加灵活和精确。例如，选择器字符串

.container > input:checked

将选择<div class="container">其中为<input>s 并已检查的子项。

Answer 3

解决方法可能是这样做：

element["style"].padding = '10px';
element["style"].borderTop = '0';

也许这不是最好的解决方案，但它应该有效，我使用了多次:)