我将如何编写以下JavaScript:
var element = document.querySelector('.element')
element.style.color = 'red'
在Reason?
到目前为止,我有:
[@@@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
)?
答案 0 :(得分:2)
首先,这已经在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"
};
但是我猜你正在做这个学习,在这种情况下,后者将是一个糟糕的主意。
答案 1 :(得分:0)
一种方法是:
[@@@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提供了许多类型。
未答复的问题: