디코딩 Html.Attribute.style

Question

n00b. 이 질문에 대한 답변은 How to get style in Elm입니다. 질문에서 영업 이익은 충분히 쉬웠다 만 특정 스타일의 항목 line-height을 필요로했다. 모든 스타일 항목을 얻는 방법을 살펴볼 때 나는 그 순간에 당황했다. https://ellie-app.com/VNs4WGpNDNa1/0 :

이 엘리에서 나는이 느릅 나무 적용된 스타일을 나타내는 JSON 객체를 디코딩의 예를 제작했습니다. 여태까지는 그런대로 잘됐다.

그러나이 Ellie에서는 특정 스타일 항목 (color)을 표시하지만 전체 스타일 구조를 표시하지 않습니다 : https://ellie-app.com/VN8X9kHbBfa1/0. (이 엘리에서 나는 또한 colorDecoder과 styleDecoder 기능을 어떻게 든 매개 변수화하여 조합하고 싶습니다 ... 다른 시간 동안의 전투이지만 ...)

많은 도움이 필요한 지침 :-)!

Answer 1

target.style의 javascript 값은 대부분 값이 문자열 인 필드로 구성되며이며 문자열이 아닌 일부 필드도 포함합니다. 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)