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>
3 answers
solution1
1 2020-09-04 08:55:32
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.
solution2
-1 2020-09-03 09:45:11
you may use document.querySelector('.logo').style.color = "#000 !important"; to prevent it restore。
solution3
-1 2020-09-03 09:52:59
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.