如何獲得在 Blazor 中單擊的元素的 css 屬性？

Question

這是 blazor 服務器端的一些A元素：

<div>
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
</div>

以上A元素的position都是絕對的。 Left和Top與每個A元素不同。

現在，當單擊A元素時，我想獲取其 position 的Left和Top 。

我需要通過JS interop將js object從.Net方法轉移到JS方法，而我不知道如何獲取JS object in.Net方法。

我怎樣才能做到這一點？

謝謝你。

Answer 1

您可以捕獲對元素的引用，如下所示：

<a @ref="anchorElement" href="javascript:void(0)" class="Add" 
                                                @onclick="SingleAddClick"> 

@code
{
    private ElementReference anchorElement;
}

現在您可以調用 JSInterop 方法並將元素引用傳遞給它。 您應該在 JS 方法中使用它，就好像它是由 getElementById 方法檢索的一樣。

注意：您不應該在 Blazor 中使用 JavaScript。 使用@onclick:preventDefault而不是href="javascript:void(0)"

希望對您有所幫助，如果遇到困難，請告訴我

Answer 2

為了識別left和top ，您需要為每個錨標記提供唯一標識符 (uid)。 您的 uid 可以是ElementReference或只是 static（硬編碼）名稱。 使用此 uid，您可以識別從哪里引發事件，然后在 dom 中搜索它以找到與視口相關的 position。

以下是您需要做的更改才能讓元素離開並置頂position。

Razor 組件

@inject IJSRuntime JSRuntime // need to inject IJSRuntime to invoke a JavaScript function.

<a id="anchor1" href="" class="Add" @onclick='() => SingleAddClick("anchor1")' @onclick:preventDefault>

@code{

    private async Task SingleAddClick(string clickedElementId)
    {
        //your existing code

        // call the javacript method that will be returing something.
        var dimensions = await JSRuntime.InvokeAsync<string>("getDimensions", clickedElementId);

        // I've used a dynamic type object so that I don't need to create a custom class to desealize it.
        dynamic d = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(dimensions);

        // Since I've used dynamic keyword thus the type will get resolved at runtime. 
        // Will throw exception if d is null thus need to be handled properly.
        string top = d.top;
        string left = d.left;
    }
}

JS 庫

如果您使用任何現有的 js 文件進行互操作服務，請在 javascript 方法下方添加，否則創建一個新的 js 文件並在_host 中引用它。

function getDimensions(element) {
    return JSON.stringify(document.getElementById(element).getBoundingClientRect());
}

注意： getBoundingClientRect()方法返回元素的大小及其相對於視口的 position。