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

问题描述：

我怎么会写下面的JavaScript：如何使用Reason/Bucklescript设置DOM属性（即样式）？

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？

答

所以首先，这已经在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猜你正在学习，在这种情况下，后者将是一个可怕的想法。

答

一种方式来做到这一点是：

[@@@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类型而不是使用字符串？

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

相关推荐