如何在 Elm 中获得风格

Question

我从 Elm 开始，当你想设置样式时，你可以简单地将它嵌入到你的组件中：Html.Attribute.style List (String, String)

但我找不到获取样式而不是设置的方法。实际上，我需要的是特定Html msg 的line-height（CSS 属性）。我阅读了一些关于使用自定义解码器（Json.Decode.at）的信息，但我仍然没有明白。

Answer 1

Mateus，我刚开始使用榆树，所以值得一试。

当您收到一个事件时，您可以询问事件目标以获取有关它或相关元素的信息。显然，在没有事件的情况下，（目前）没有一种方法可以随意“进入”DOM（请参阅下面的 *1）

资源：

*1：https://medium.com/@debois/elm-the-dom-8c9883190d20

*2：https://robots.thoughtbot.com/building-custom-dom-event-handlers-in-elm

回到你的问题，原来设置的样式 [(key1, val1)...(keyn, valn)] 变成了 {key1:val1, ...keyn:valn}。 （我通过调试 elm 的转译代码找到了这一点……然后在其他地方查看有关它的文档；看图。）

请参阅下文以获取具体的行高。我想获取所有样式的列表可能会更有用。修改后的示例如下：

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (on)
import Json.Decode 


main =
  beginnerProgram { model = "", view = view, update = update }

type Msg = Attr StyleStruct

type alias StyleStruct =
  {lineHeight: String}


view model =
  div []
    [ button [ id "btn"
        , class "cls"
        , style [("color", "green"), ("line-height", "3em")]
        , myOnClick Attr ]
        [ text "Show line-height" ]
    , div [] [ text ("(" ++ model ++ ")")]
    ]

update msg model =
  case msg of
    Attr v1 ->
      toString v1

targetStyle =
  Json.Decode.map StyleStruct
    (Json.Decode.at ["target", "style"] styleStructDecoder)

styleStructDecoder =
  Json.Decode.at ["line-height"] Json.Decode.string


myOnClick : (StyleStruct -> msg) -> Html.Attribute msg
myOnClick tagger =
  on "click" (Json.Decode.map tagger targetStyle)