如何获取在 Blazor 中单击的元素的 css 属性？答案

【问题标题】：How can I get css property of an element which clicked in Blazor?如何获取在 Blazor 中单击的元素的 css 属性？
【发布时间】：2020-07-12 02:50:39
【问题描述】：

这是 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元素的所有位置都是绝对的。 Left 和 Top 与每个 A 元素不同。

现在，当单击 A 元素时，我想获取其位置的 Left 和 Top。

我需要通过JS interop将js对象从.Net方法转移到JS方法，而我不知道如何在.Net方法中获取JS对象。

我怎样才能做到这一点？

谢谢。

【问题讨论】：

标签： asp.net-core .net-core blazor

【解决方案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)"

希望对您有所帮助！如果您遇到困难，请告诉我

【讨论】：

ElementReference 是最好的选择！

【解决方案2】：

为了识别 left 和 top，您需要为每个锚标记提供唯一标识符 (uid)。您的 uid 可以是 ElementReference 或只是静态（硬编码）名称。使用此 uid，您可以识别从哪里引发事件，然后在 dom 中搜索它以找到与视口的相对位置。

以下是您需要进行的更改，以使元素位于左侧和顶部位置。

剃须刀组件

@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() 方法返回元素的大小及其相对于视口的位置。

【讨论】：