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

What replaces the old HTMLElement.style when using the new Fable.Browser.Dom

我用 fulma-demo 开始了一个项目,并尝试从另一个使用旧版本的寓言和 Fulma 的示例项目移植一些代码。它具有以下无法编译的行:

testWrapper.style.borderColor <- "#E95D0F"

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

编辑:

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

随着 Fable.Core v3 的发布,Alfonso 开始返工几个 "historical" 软件包,例如 Fable.Import.Browser.

It's possible you haven't noticed but many Fable libraries have a dependency to the monstrous Fable.Import.Browser package, a single file of more than 12000 lines that most IDEs struggled to open. This file was automatically generated in its origin using ts2fable from Typescript definitions. It also contained manual tweaks however, and this together with its size made it very difficult to update.

引用自Fable blog

所以 Fable.Import.Browser 被拆分成几个包:

  • Fable.Browser.Blob
  • Fable.Browser.Dom
  • Fable.Browser.Event
  • Fable.Browser.Performance
  • Fable.Browser.Url
  • Fable.Browser.WebSocket
  • Fable.Browser.WebStorage
  • Fable.Browser.XMLHttpRequest

但是,仍然缺少Fable.Browser.SvgFable.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"