Menu
I'm using this script to allow user to change the background color...
document.onclick = function SetFavColor(e) {
if (e.target.className == 'AvcGbtn') {
var favColor = e.target.style.backgroundColor;
localStorage.setItem('color', favColor);
document.body.style.backgroundColor = favColor;
console.log(favColor);
}
};
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var favColor = document.body.style.backgroundColor;
var color = localStorage.getItem('color');
if (color === '') {
document.body.style.backgroundColor = favColor;
} else {
document.body.style.backgroundColor = color;
}
});
CSS:
body {
max-width: 100%;
min-width: 100%;
height: 100%;
font-family: normal;
font-style: normal;
font-weight: normal;
background-color: transparent;
}
.AvcGbtn {
display: inline-block;
width: 2em;
height: 2em;
}
HTML:
<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background: #757575; background-size: 100% 100%;" rel="nofollow"></span>
This is working, but the problem is that it shows the selected color after page is fully loaded. I want to show the color the user selects before the page is loaded.
Example: background color is white, and user selects red. The script shows a white background color before selection, and after the user selects red, the script changes the background color to red. How can I do this?
That is exactly what I'm trying to do with Javascript, example CSS
body:before {
background-color: red;
}
525
To change background color with javascript you can apply style. background or style. backgroundColor on the element you want to change background for. The below example changes the background color of the body when you click an element using style.
How to Add Background Color in HTML. To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
We can set a full-page background color by simply changing the screen height of an HTML body. In Tailwind CSS, we use an alternative of CSS background-color property which is represented as background-color-opacity ( eg: bg-blue-200 ) and it is used to specify the background color of an element.
Conditional Changing the Background Color in Reactimport React from 'react'; import './App. css'; function App() { const isBackgroundRed = true; return ( <div className={isBackgroundRed ? 'background-red' : 'background-blue'} /> ); } export default App; JSX allows us to write JavaScript inside of HTML.
First you can simplify your logic of setting the color like below:
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var color = localStorage.getItem('color');
if (color != '') {
document.body.style.backgroundColor = color;
}
});
You only need to change the color if there is something stored locally, if not the default color specified in the CSS will be used automatically.
In order to have a fast change you can get rid of any event and put your script within the head tag and instead of targeting the body element you can target the html one and you will have the same result due to background propagation:
<!DOCTYPE html>
<html>
<head>
<!-- coloration -->
<style>html {background:red} /*default color*/</style>
<script>
var color ="blue" /*localStorage.getItem('color')*/;
if (color != '') {
document.documentElement.style.backgroundColor = color;
}
</script>
<!-- -->
</head>
<body>
</body>
</html>The snippet is changing the code, you need to test locally for more accurate results.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
