我想知道Elm中元素的html属性

Question

我想知道Elm中某个元素的html属性，例如她的坐标。我正在尝试使用 Json.Decode。

我是Elm新手，这是为了学习目的。

这是一个简单的代码，我使用的是Elm 0.18：

module Stamps exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


type alias Model =
    {}


type Msg
    = NoOp
    | Clicking


model : Model
model =
    {}


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        Clicking ->
            let
                _ =
                    Debug.log "msg1" model
            in
                ( model, Cmd.none )


view : Model -> Html Msg
view model =
    div
        [ Html.Attributes.style
            [ ( "backgroundColor", "blue" )
            , ( "height", "300px" )
            , ( "width", "300px" )
            , ( "position", "relative" )
            , ( "left", "100px" )
            , ( "top", "50px" )
            ]
        , Html.Attributes.class
            "parent"
        ]
        [ div
            [ Html.Attributes.style
                [ ( "background-color", "#3C8D2F" )
                , ( "cursor", "move" )
                , ( "width", "100px" )
                , ( "height", "100px" )
                , ( "border-radius", "4px" )
                , ( "position", "absolute" )
                , ( "color", "white" )
                , ( "display", "flex" )
                , ( "align-items", "center" )
                , ( "justify-content", "center" )
                ]
            , Html.Attributes.class
                "children"
            , Html.Events.onClick Clicking
            ]
            []
        ]


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


main : Program Never Model Msg
main =
    Html.program
        { init = ( model, Cmd.none )
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

Answer 1

所以我不太确定你具体想要获得哪些偏移量，但我认为这会让你走上正轨。首先，您需要调整您的

Msg

ADT 的

Clicking

以获得坐标元组。

type Msg
    = NoOp
    | Clicking Int Int

假设您现在想坚持只记录坐标，则可以使用它。 请记住，如果需要，您可以在模式匹配中解构。

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        Clicking x y ->
            let
                _ =
                    Debug.log "coords" ( x, y )
            in
                ( model, Cmd.none )
            
            

您需要为该元组添加

Json.Decode.Decoder

。

import Json.Decode as Decode exposing (Decoder)


coordsDecoder : (Int -> Int -> a) -> Decoder a
coordsDecoder into =
    Decode.field "target" <| 
        Decode.map2 into
            (Decode.field "offsetWidth" Decode.int)
            (Decode.field "offsetHeight" Decode.int)

最后，您需要

on

 来让解码器对 JavaScript 单击事件返回的 

Event

 对象执行某些操作。该解码器获取坐标，然后 

Decode.map

 为 

Clickingmsg

 类型。

Html.Events.on "click" (coordsDecoder Clicking) 有了这个

Decode.field "target" ...

，您就可以开始从目标元素中解码您想要的任何内容。

---

从风格上讲，您将所有

Html.*

 函数导入到 

exposing (..)

 的作用域中，但您仍然为所有内容添加前缀，这是相当多余的。您可以只使用 

style

 而不是 

Html.Attributes.style

。不要害怕使用 

as

 -> 

Html.Attributes as Attr

。

Answer 2

非常好的答案，如果我尝试获取与浏览器相关的坐标，以防左侧和顶部的样式不确定。我正在寻找一些解决方案并发现了这个

offsetParent : a -> Decoder a -> Decoder a
offsetParent x decoder =
  Decode.oneOf
    [ field "offsetParent" <| Decode.null x
    , field "offsetParent" decoder
    ]