Menu
On click event changes every column's background color and it works. But there's the html-body background color that I want to have different (only opacity). Now it gives the same color for body.background (last line) like other columns. Instead of that I want body to have the same color, but 0.5 Opacity, so the elements on top, that have opacity 1, would stand out nicely.
function BackgroundColorChange(){
// the main opacity level
var a = 1;
// some colors chosen for DOM elements backgrounds
var blue = 'rgba(51, 102, 153,'+a+')';
var grey = 'rgba(66, 82, 102,'+a+')';
var darkgreen = 'rgba(25, 102, 102,'+a+')';
var lightgreen = 'rgba(62, 116, 89,'+a+')';
var brown = 'rgba(96, 86, 57,'+a+')';
var purple = 'rgba(66, 36, 51,'+a+')';
var colorSelection = [blue, grey, darkgreen, lightgreen, brown, purple];
// pick the random color for background as the event is clicked
var color = colorSelection[Math.floor(Math.random() * colorSelection.length)];
// the elements i want to have 'opacity = 1' are selected here
var subsection = document.querySelectorAll(".childElement-column-photo, .childElement-sub-section, .sub-section, .modal-header, .modal-footer");
for (var i = 0; i < subsection.length; i++) {
subsection[i].style.backgroundColor = color;
}
a = 0.5; //? ? ? ? ?
// I want this body element to have the same color but with 0.5 opacity
document.body.style.backgroundColor = color;
}
I have tried to play around while defining 'a' for opacity, but it didn't work.
HTML: this is mainly how my html is tagged.
<a onclick="BackgroundColorChange();" href="#">ChangeColor</a>
<body onload="setInterval(BackgroundColorChange(), 50000)">
// there are many elements with this class name
<div class="childElement-column-photo">
276
asked Dec 03 '25 08:12
In my opinion is the following the best solution:
Try to save the rgb color as an array and build your css property on the fly.
function buildRgbaCSSProperty(color, alpha) {
return 'rgba(' + color[0] + ', ' + color[1] + ', ' + color[2] + ', '+ alpha + ')';
}
function BackgroundColorChange(){
// the main opacity level
var a = 1;
// some colors chosen for DOM elements backgrounds
var blue = [51, 102, 153];
var grey = [66, 82, 102];
var darkgreen = [25, 102, 102];
var lightgreen = [62, 116, 89];
var brown = [96, 86, 57];
var purple = [66, 36, 51];
var colorSelection = [blue, grey, darkgreen, lightgreen, brown, purple];
// pick the random color for background as the event is clicked
var color = colorSelection[Math.floor(Math.random() * colorSelection.length)];
// the elements i want to have 'opacity = 1' are selected here
var subsection = document.querySelectorAll(".childElement-column-photo, .childElement-sub-section, .sub-section, .modal-header, .modal-footer");
for (var i = 0; i < subsection.length; i++) {
subsection[i].style.backgroundColor = buildRgbaCSSProperty(color, a);
}
a = 0.5; //? ? ? ? ?
// I want this body element to have the same color but with 0.5 opacity
document.body.style.backgroundColor = buildRgbaCSSProperty(color, a);
}
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
