如何使用Reason/Bucklescript設置DOM屬性（即樣式）？

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

但後來我guess猜你正在學習，在這種情況下，後者將是一個可怕的想法。

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 module提供了一堆類型。

未答覆的問題：

• 我怎麼能走大教堂模塊的屬性類型的優勢，而不是使用字符串？
• 如何利用Dom模塊的cssStyleDeclaration類型而不是使用字符串？