在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