css - 如何在 Elm 中获得风格

我从 Elm 开始，当你想设置样式时，你可以简单地将它嵌入到你的组件中:Html.Attribute.style List (String, String)
但是我找不到 获得 样式而不是设置的方法。实际上，我需要的是特定 line-height 的 Html msg (CSS 属性)。我阅读了一些关于使用自定义解码器(使用 Json.Decode.at )的内容，但我仍然没有明白。

最佳答案

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)

关于css - 如何在 Elm 中获得风格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43398381/