Html 获取ELM中的元素宽度

我喜欢html

<h1 class = 'block__title' id='title'>Main text</h1>

我可以通过以下方式在js中获取此元素：

const title = document.getElementById('title');

用宽度

title.offsetWidth+1做任何事情

我怎么能在ELM做同样的事？
我有：

我需要使元素的宽度更高，以便进行进一步的更改
您需要使用
Browser.Dom.getElement
如下所示：

module Main exposing (main)

import Browser
import Browser.Dom exposing (Element, Error)
import Html exposing (Html, button, div, h1, text)
import Html.Attributes exposing (class, id)
import Html.Events exposing (onClick)
import Task


type alias Model =
    { titleWidth : Float }


init : () -> ( Model, Cmd Msg )
init _ =
    ( { titleWidth = 0 }
    , Browser.Dom.getElement "title" |> Task.attempt GotElement
    )


type Msg
    = GotElement (Result Error Element)


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

        GotElement (Ok element) ->
            ( { model | titleWidth = element.element.width }, Cmd.none )


view : Model -> Html Msg
view model =
    div []
        [ h1 [ class "block-title", id "title" ] [ text "Main Title Text" ]
        , div [] [ text <| "Title Width: " ++ String.fromFloat model.titleWidth ]
        ]


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

模块主显示（主）
导入浏览器
导入Browser.Dom（元素，错误）
导入Html（Html、按钮、div、h1、文本）
导入Html.Attributes（类，id）
导入Html.Events（onClick）
导入任务
类型别名模型=
{titleWidth:Float}
初始化：（）->（模型，Cmd Msg）
初始化=
（{titleWidth=0}
，Browser.Dom.getElement“title”|>Task.getElement
)
输入味精
=GotElement（结果错误元素）
更新：Msg->Model->（Model，Cmd-Msg）
更新msg模型=
味精案例
GotElement（Err-Err）->
（型号，Cmd.none）
GotElement（确定元素）->
（{model | titleWidth=element.element.width}，Cmd.none）
查看：模型->Html消息
视图模型=
分区[]
[h1[类别“块标题”，id“标题”][文本“主标题文本”]
，div[]文本子项无
}

您可以在中找到更多信息。
ty，这确实很有帮助，但我无法安装浏览器软件包，我得到的
您的.elm/packages/目录可能已损坏。我被说服相信存在elm/browser，但我在查找此软件包的发布版本时找不到任何内容。
我的json是“依赖项”：{“elm/browser”：“1.0.0@Сааааa您应该能够删除该目录并重建-我建议不要手动编辑
elm.json
文件-使用
elm install
（该软件包应该已经存在-可能是一个隐藏的依赖项-因此如果您可以在拥有它之前编译您的项目）@Carsten我使用的只是
elm安装
但浏览器软件包不在那里我可以安装http、url解析器等，但没有浏览器软件包，看起来这个软件包不存在您使用的是什么版本（elm）？是的，我想是的-事情有点变了，但我在0.18核心库中找不到类似
getElement
的东西
[ h1 [ class "block-title" ]
            [ text (Main text)
            ]
]

module Main exposing (main)

import Browser
import Browser.Dom exposing (Element, Error)
import Html exposing (Html, button, div, h1, text)
import Html.Attributes exposing (class, id)
import Html.Events exposing (onClick)
import Task


type alias Model =
    { titleWidth : Float }


init : () -> ( Model, Cmd Msg )
init _ =
    ( { titleWidth = 0 }
    , Browser.Dom.getElement "title" |> Task.attempt GotElement
    )


type Msg
    = GotElement (Result Error Element)


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

        GotElement (Ok element) ->
            ( { model | titleWidth = element.element.width }, Cmd.none )


view : Model -> Html Msg
view model =
    div []
        [ h1 [ class "block-title", id "title" ] [ text "Main Title Text" ]
        , div [] [ text <| "Title Width: " ++ String.fromFloat model.titleWidth ]
        ]


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }