将样式应用于TypeScript节点元素

Question

我目前正在学习TypeScript，但我不知道如何正确解决这个问题。我想将HTMLElement的样式设置为我的样式函数的参数，如下所示：

function styleElement(unstyled: HTMLElement) {
  const styled = unstyled.cloneNode(); // styleElement should be a pure function
  styled.style = { opacity: 0 }; // TypeScript says: Property 'style' does not exist on type 'Node'.

  return styled;
}

我检查了“Node”接口声明，缺少样式属性。据我所知，它在W3C规范中有描述，该Node没有任何样式属性。但是如何通过这个限制来解决我的问题？

但是，覆盖“HTMLElement”上的style属性会触发readonly错误，这也很奇怪。

谢谢！

Answer 1

你可以施放：

function styleElement(unstyled: HTMLElement) {
  const styled = unstyled.cloneNode() as HTMLElement;
  styled.style = { opacity: 0 }; // Now works properly.
  // Although styled.style.opacity = 0; would have been preferable

  return styled;
}