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

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

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

我怎样才能做到这一点？

谢谢。

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

为了识别左侧和顶部，您需要为每个锚标记提供一个唯一标识符 (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() 方法返回元素的大小及其相对于视口的位置。