使用新的 Fable.Browser.Dom 时，什么替换旧的 HTMLElement.style

Question

我使用 fulma-demo 启动了一个项目，并尝试从另一个使用旧版本 Fable 和 Fulma 的示例项目中移植一些代码。它有以下行无法编译：

testWrapper.style.borderColor <- "#E95D0F"

显然HTMLElement 上不再存在style属性。什么取代了它？

编辑：

open Fable.Core.JsInterop
open Browser
open Browser.Types
let testWrapper = document.querySelector(".test-wrapper")  :?> HTMLElement

Answer 1

随着 Fable.Core v3 的发布，Alfonso 开始重新设计几个“历史”包，例如Fable.Import.Browser.

您可能没有注意到，许多 Fable 库都依赖于这个巨大的Fable.Import.Browser包，这是一个超过 12000 行的单个文件，大多数 IDE 都很难打开。该文件是使用 Typescript 定义中的 ts2fable 在其源头自动生成的。然而，它还包含手动调整，这与它的大小一起使得更新非常困难。

引自寓言博客

所以Fable.Import.Browser被分成了几个包：

• 寓言.浏览器.Blob
• 寓言.Browser.Dom
• 寓言.浏览器.事件
• 神鬼寓言.浏览器.性能
• 寓言.浏览器.Url
• 寓言.浏览器.WebSocket
• 寓言.浏览器.WebStorage
• Fable.Browser.XMLHttpRequest

然而，它仍然失踪Fable.Browser.Svg了Fable.Browser.Css。我已经有了一个版本，Fable.Browser.Svg并且正在制作一个版本，Fable.Browser.Css所以希望它们很快就能使用。

也就是说，如果您style现在需要访问元素的属性，则需要使用dynamic typing：

open Fable.Core.JsInterop
open Browser
open Browser.Types

let testWrapper = document.querySelector(".test-wrapper")  :?> HTMLElement

testWrapper?style?borderColor <- "#E95D0F"