Question

的n00b。这是我在How to get style in Elm回答的后续问题。在问题中，OP只需要一个特定的样式项line-height，这很容易。在考虑获取所有风格的物品时，我现在很难过。

在这个Ellie中，我做了一个解码表示Elm应用样式的Json对象的例子：https://ellie-app.com/VNs4WGpNDNa1/0。到目前为止一切都很好。

然而，在这个Ellie中，显示特定样式项（color）有效，但显示整个样式结构并不是https://ellie-app.com/VN8X9kHbBfa1/0。（在这个Ellie中我也想通过某种方式将colorDecoder和styleDecoder函数组合起来进行参数化......但这又是另一次的争斗！）

寻求指导:-)！

Answer 1

target.style中的javascript值属于CSSStyleDeclaration类型，它主要由值为字符串的字段组成，但也包含一些非字符串的字段。例如，length是一个数字，setProperty是一个函数。

你的解码器假设所有值都是字符串，它们不是，所以它会无声地失败。

如果您只需要string类型的值，可以使用Json.Decode.maybe Json.Decode.string查找字符串类型的值，然后Json.Decode.andThen和List.filterMap来保留字符串值：

styleFormatDecoder =
    Json.Decode.keyValuePairs (Json.Decode.maybe Json.Decode.string)
        |> Json.Decode.map justStringVals

justStringVals : List (String, Maybe String) -> List (String, String)
justStringVals =
    List.filterMap (\(key, maybeVal) ->
        case maybeVal of
            Just val -> Just (key, val)
            Nothing -> Nothing)

解码Html.Attribute.style

1 个答案: