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

Question

I tested my function by calling it when the button on the page is clicked and it works fine but when I call the function with window.onload it changes color for a moment and goes back to original color defined in CSS.我通过在单击页面上的按钮时调用它来测试我的函数，它工作正常，但是当我使用 window.onload 调用该函数时，它会暂时改变颜色并恢复到 CSS 中定义的原始颜色。 I'm guessing there's a problem with calling the function onload or something to do with Blazor project itself.我猜调用函数 onload 或与 Blazor 项目本身有关的问题存在问题。 I also tried moving my js script in body or head but it doesn't do anything.我也尝试在 body 或 head 中移动我的 js 脚本，但它没有做任何事情。 I tried replacing the CSS class with another one using Jquery and I get the same effect.我尝试使用 Jquery 用另一个 CSS 类替换 CSS 类，我得到了相同的效果。

Javascript: Javascript：

window.onload = function () {
    
    if (window.location.href.match('https://localhost:44322/blog') != null) {
        document.querySelector('.logo').style.color = "#000";  
    }
};

CSS: 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: HTML：

<h3 class="logo"> 
    Some <span>Text</span>
</h3>

Answer 1

I managed to find a solution.我设法找到了解决方案。 Did it all with C#.用 C# 完成了这一切。 Here's the code这是代码

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 HTML

<h3 class="logo" style="@logoStyle"> 
    Some<span>Text</span>
</h3>

Note: At the top of the page I also added注意：在页面顶部我还添加了

@implements IDisposable

So I removed the color attribute from the CSS and added it to an h3 element with simple binding.因此，我从 CSS 中删除了 color 属性，并将其添加到具有简单绑定的 h3 元素中。 Then inside OnInitialized() method I'm handling NavigationManager's event LocationChanged which is fired whenever navigation location is changed.然后在 OnInitialized() 方法中，我正在处理 NavigationManager 的事件 LocationChanged，每当导航位置更改时就会触发该事件。 I added the if statement inside OnInitialized() method to make sure color doesn't change when the page is refreshed.我在 OnInitialized() 方法中添加了 if 语句，以确保刷新页面时颜色不会改变。

Answer 2

you may use document.querySelector('.logo').style.color = "#000 !important";你可以使用document.querySelector('.logo').style.color = "#000 !important"; to prevent it restore。防止它恢复。

Answer 3

Is there a specific reason why you put your JS code in window.onload ?将 JS 代码放在window.onload是否有特定原因？ It should work fine if you just execute it right away.如果您立即执行它，它应该可以正常工作。 Be aware however, that then you need to put the <script> at the end of the HTML <body> .但是请注意，您需要将<script>放在 HTML <body>的末尾。 (but you should be doing that anyway) （但无论如何你都应该这样做）

If the code needs to be executed onload , then I suggest having the logo hidden by default and then reveal it on page load (with the right color).如果代码需要在onload上执行，那么我建议默认隐藏徽标，然后在页面加载时显示它（使用正确的颜色）。 To achieve this, do the following:为此，请执行以下操作：

HTML: HTML：

<h3 class="logo hiddenOnLoad"> Some<span>Text</span></h3>

CSS: 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: 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');
  }
};

This would still lead to a flash at the beginning of the page load, but if you put hiddenOnLoad on the whole page, it won't look weird.这仍然会导致页面加载开始时出现闪烁，但是如果您将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