Change color of an element when specific page is loaded using javascript in blazor project

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. I'm guessing there's a problem with calling the function onload or something to do with Blazor project itself. I also tried moving my js script in body or head but it doesn't do anything. I tried replacing the CSS class with another one using Jquery and I get the same effect.

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>

Welcome to StackOverflow! Have you tried to change `window.onload` to `document.onload`? See details [here](https://stackoverflow.com/questions/588040/window-onload-vs-document-onload) — xKobalt, Sep 03 '20 at 09:43
Sorry I don't have time for a complete answer - ditch the javascript. Use a C# variable to set a style on the "logo" `
` then use NavigationManager (in C#) to change the `logoStyle` according to the current route. Alternatively you can investigate a CascadingValue around the `@Body` of MainLayout and use that to allow each "page" to set the logo style if you want. No need for javascript and it really isn't a good idea to manipulate the DOM from JS like this in Blazor anyway — Mister Magoo, Sep 03 '20 at 09:55
@MisterMagoo Thank you so much for your advice. I managed to do it with NavigationManager like you said. — Boris Martinovic, Sep 04 '20 at 08:36

score 1 · Answer 1 · answered Sep 04 '20 at 08:55

I managed to find a solution. Did it all with C#. Here's the code

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>

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. Then inside OnInitialized() method I'm handling NavigationManager's event LocationChanged which is fired whenever navigation location is changed. I added the if statement inside OnInitialized() method to make sure color doesn't change when the page is refreshed.

score -1 · Answer 2 · answered Sep 03 '20 at 09:45

-1

you may use document.querySelector('.logo').style.color = "#000 !important"; to prevent it restore。

answered Sep 03 '20 at 09:45

Swordword

151
7

1

That will not prevent Blazor resetting it. – Mister Magoo Sep 03 '20 at 09:46
sorry , i told a wrong way, but you can try `document.querySelector(".logo").classList.add('force-style')` and add a css class like ` .force-style { color: #000 !important; }` – Swordword Sep 03 '20 at 09:58
It will be worth editing you existing answer, based what you've written in the comment above. Cheers! – d219 Sep 03 '20 at 10:14
That still won't prevent blazor changing the style. – Mister Magoo Sep 03 '20 at 11:33

score -1 · Answer 3 · answered Sep 03 '20 at 09:52

Is there a specific reason why you put your JS code in 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>. (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). To achieve this, do the following:

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

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.

Blazor will override this code. It will reset the style according to the markup in the Blazor application. — Mister Magoo, Sep 03 '20 at 09:56

Change color of an element when specific page is loaded using javascript in blazor project

3 Answers3