如何使用 Reason/Bucklescript 设置 DOM 属性（即样式）？答案

【问题标题】：How to set DOM attribute (i.e. style) using Reason/Bucklescript?如何使用 Reason/Bucklescript 设置 DOM 属性（即样式）？
【发布时间】：2017-09-20 09:35:35
【问题描述】：

我将如何编写以下 JavaScript：

var element = document.querySelector('.element')
element.style.color = 'red'

原因？

到目前为止我有：

[@@@bs.config {no_export: no_export}];

external document : Dom.document = "document" [@@bs.val];

external query_selector : Dom.document => string => Dom.element = "querySelector" [@@bs.send];

let element = query_selector document ".element";

编译得很好。

但是我怎样才能在element 上设置一个属性（即style）？

【问题讨论】：

标签： ffi reason bucklescript

【解决方案1】：

首先，这已经在bs-webapi 中可用。但如果你想重新创建（并简化）它，方法如下：

external document : Dom.document = "document" [@@bs.val];
external querySelector : string => option Dom.element = "" [@@bs.send.pipe: Dom.document] [@@bs.return null_to_opt];
external style : Dom.element => Dom.cssStyleDeclaration = "" [@@bs.get];
external setColor : Dom.cssStyleDeclaration => string => unit = "color" [@@bs.set];

let () =
    switch (document |> querySelector ".element") {
      | Some element => setColor (style element) "red";
      | None => ()
    };

你也可以把类型安全抛到窗外，像这样：

external document : Js.t {..} = "document" [@@bs.val];

let () = {
  let element = document##querySelector ".element";
  element##style##color #= "red"
};

但是我猜你这样做是为了学习，在这种情况下，后者将是一个糟糕的主意。

【讨论】：

【解决方案2】：

一种方法是：

[@@@bs.config {no_export: no_export}];

external document : Dom.document = "document" [@@bs.val];

external query_selector : Dom.document => string => Dom.element = "querySelector" [@@bs.send];

external set_attribute : Dom.element => string => string => unit = "setAttribute" [@@bs.send];

let element = query_selector document ".element";

set_attribute element "style" "color: red";

但是，我不确定是否有更好的方法。

注意事项：

[@@@bs.config {no_export: no_export}]; 阻止 Bucklescript 导出 ES6 模块。

Dom module 提供了一堆类型。

未回答的问题：

如何利用 Dom 模块的 attr 类型而不是使用字符串？
如何利用 Dom 模块的 cssStyleDeclaration 类型而不是使用字符串？

【讨论】：