我测试了我的函数，当点击页面上的按钮时调用它，它工作得很好，但当我用window.onload调用函数时，它会改变颜色，并返回到CSS中定义的原始颜色。我猜是onload调用函数有问题，或者是Blazor项目本身有问题。我还试着在身体或头部移动js脚本，但它没有任何作用。我尝试使用Jquery将CSS类替换为另一个CSS类，得到了同样的效果。
Javascript：
window.onload = function () {
if (window.location.href.match('https://localhost:44322/blog') != null) {
document.querySelector('.logo').style.color = "#000";
}
};
CSS：
.logo {
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 3rem;
padding: 0 10px;
margin-top: 9px;
color: #fff;
}
HTML:
<h3 class="logo">
Some <span>Text</span>
</h3>
我设法找到了一个解决方案。这一切都是用C#完成的。这是代码
C#
protected string logoStyle { get; set; } = "color:#fff";
[Inject]
public NavigationManager NavigationManager { get; set; }
protected override void OnInitialized()
{
NavigationManager.LocationChanged += HandleLocationChanged;
if(NavigationManager.Uri == "https://localhost:44322/blog")
{
logoStyle = "color:#212529";
}
}
protected void HandleLocationChanged(object sender, LocationChangedEventArgs e)
{
if (e.Location== "https://localhost:44322/blog")
{
logoStyle = "color:#212529";
StateHasChanged();
}
}
public void Dispose()
{
NavigationManager.LocationChanged -= HandleLocationChanged;
}
HTML
<h3 class="logo" style="@logoStyle">
Some<span>Text</span>
</h3>
注意：在页面顶部，我还添加了
@implements IDisposable
因此，我从CSS中删除了color属性，并通过简单的绑定将其添加到h3元素中。然后在OnInitialized((方法中，我处理NavigationManager的事件LocationChanged，每当导航位置更改时就会触发该事件。我在OnInitialized((方法中添加了if语句，以确保刷新页面时颜色不会改变。
您可以使用document.querySelector('.logo').style.color = "#000 !important";来阻止它恢复
将JS代码放在window.onload中有具体原因吗？如果你立即执行它，它应该可以正常工作。但是，请注意，您需要将<script>放在HTML<body>的末尾。(但你无论如何都应该这么做(
如果代码需要执行onload，那么我建议默认隐藏徽标，然后在页面加载时显示它(使用正确的颜色(。要做到这一点，请执行以下操作：
HTML:
<h3 class="logo hiddenOnLoad"> Some<span>Text</span></h3>
CSS：
.logo {
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 3rem;
padding: 0 10px;
margin-top: 9px;
color: #fff;
}
.hiddenOnLoad {
display: none;
}
JS:
window.onload = function () {
if (window.location.href.match('https://localhost:44322/blog') != null) {
document.querySelector('.logo').style.color = "#000";
document.querySelector('.hiddenOnLoad').classList.remove('hiddenOnLoad');
}
};
这仍然会导致页面加载开始时出现闪烁，但如果将hiddenOnLoad放在整个页面上，它看起来不会很奇怪。