在blazor项目中使用javascript加载特定页面时更改元素的颜色

Question

我通过在单击页面上的按钮时调用它来测试我的函数，它工作正常，但是当我使用 window.onload 调用该函数时，它会暂时改变颜色并恢复到 CSS 中定义的原始颜色。 我猜调用函数 onload 或与 Blazor 项目本身有关的问题存在问题。 我也尝试在 body 或 head 中移动我的 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>

Answer 1

我设法找到了解决方案。 用 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 语句，以确保刷新页面时颜色不会改变。

Answer 2

你可以使用document.querySelector('.logo').style.color = "#000 !important"; 防止它恢复。

Answer 3

将 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放在整个页面上，它看起来不会很奇怪。

在blazor项目中使用javascript加载特定页面时更改元素的颜色

问题描述

3 个解决方案

解决方案1
1 2020-09-04 08:55:32

解决方案2
-1 2020-09-03 09:45:11

解决方案3
-1 2020-09-03 09:52:59

在blazor项目中使用javascript加载特定页面时更改元素的颜色

问题描述

3 个解决方案

解决方案1 1 2020-09-04 08:55:32

解决方案2 -1 2020-09-03 09:45:11

解决方案3 -1 2020-09-03 09:52:59

解决方案1
1 2020-09-04 08:55:32

解决方案2
-1 2020-09-03 09:45:11

解决方案3
-1 2020-09-03 09:52:59