Как установить атрибут DOM (то есть стиль), используя Reason/Bucklescript?

Question

Как бы я написал следующий 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";

И это прекрасно компилируется.

Но как бы я мог установить атрибут (т.е. style) на element?

Answer 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"
};

Но тогда я предполагаю, что вы делаете это, чтобы учиться, и в этом случае последнее будет ужасной идеей.

Answer 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 предоставляет несколько типов.

Неотвеченные вопросы:

• Как я могу использовать преимущество типа attr модуля Dom вместо использования строки?
• Как воспользоваться преимуществами типа cssStyleDeclaration модуля Dom вместо использования строки?