I have an onclick() event on a button, to execute te following code:
function digital_tour(){
let loader = document.createElement("div");
loader.className = "loader";
console.log(loader);
document.getElementById("main-div").appendChild(loader);
}
The code works, and the element loader is shown by the console.log and returns:
<div class="loader"></div>
The loader div get appended into the main-div, including the class, but my css style is not shown. My CSS code
.main-bg .loader{
width: 100vw;
position: absolute;
top: 0;
left: 0;
height: 100vh;
background-color: green;
z-index: 5;
}
I want to show the CSS style to the loader div, but it does not work. What do I need to do to make this work?
the CSS class works like this: .main-bg .loader means you should have an element with main-bg class which has an element with the .loader class inside in other words the CSS you have will only be applied to a loader class which is inside the element with main-bg class. but you are appending loader to main-div not main-bg.