先要引用JQ库

<script src=”~/js/jquery.min.js”></script>
<script src=”~/js/common.js”></script>
<script type=”text/javascript”>
function setBodyFontSize() {
//$(‘.modal-content’).resizable({
// //alsoResize: “.modal-dialog”,
// minHeight: 300,
// minWidth: 300
//});
//$(‘.modal-dialog’).draggable();

var currentSize = parseInt($(“body”).css(“font-size”));
// 增加字体大小
$(“.increase-font-size”).click(function () {

currentSize += 2;
$(“body”).css(“font-size”, currentSize + “px”);
});
// 减小字体大小
$(“.decrease-font-size”).click(function () {
currentSize -= 2;
$(“body”).css(“font-size”, currentSize + “px”);
});
}

</script>

 

在MainLayout.cs分两种方式引入JQ:

1.页面加载时

protected override Task OnAfterRenderAsync(bool firstRender)
{

JSRuntime.InvokeVoidAsync(“setBodyFontSize”);
return base.OnAfterRenderAsync(firstRender);
}

 

2.点击事件载入

Blazor:

<div class=”layout-drawer” @onclick=”@setBodyFontSize”>JQ</div>

 

C#:

async Task setBodyFontSize()
{
await JSRuntime.InvokeVoidAsync(“setBodyFontSize”);
}

 

www.npspro.cn软师兄
软师兄 » Blazor使用调用JQ,JS,javascript 多个函数
50T免费网盘资源大集合【持续更中~~~~】:点击查看