如何获得在Blazor中单击的元素的css属性？
如何获得在Blazor中单击的元素的css属性？
提问于 2020-07-11 13:40: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。
我需要通过.Net将js对象从JS interop方法传输到JS方法，而不知道如何在.Net方法中获取JS对象。
我怎样才能做到这一点？
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-11 16:03:47
可以捕获对元素的引用，如下所示：
<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)"
我希望这能帮上忙！如果你被困住了，告诉我
Stack Overflow用户
发布于 2020-07-11 18:50:39
为了识别左边和顶部，您需要为每个锚标记提供唯一的标识符(uid)。您的uid可以是ElementReference，也可以是静态的(硬编码的)名称。使用这个uid，您可以从事件的起始位置识别，然后在dom中搜索事件，以找到相对于viewport的位置。
下面是您需要做的更改，以获得元素的左和顶位置。
剃刀组分
@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()方法返回元素的大小及其相对于视口的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62849923
复制相关文章
相似问题
腾讯云开发者
