I'm trying to assign a very large block of html and css code with help of javascript. The code works properly in the day mode but I have a little issue with that when it comes to night mode. Given container and img aren't changing color and other values when night mode is turned on. What mistake did i do?
Asked
Active
Viewed 56 times
0
Maniac Piano
- 127
- 1
- 2
- 10
-
use `var authclass = document.querySelectorAll(".night .profile-container");` – Priya Oct 23 '20 at 08:21
-
It will override some existing values. I'm already lazy to change the rest. I will proceed with what @stevetomlin said. – Maniac Piano Oct 23 '20 at 09:10
1 Answers
1
It won't work using 2 parameters in your method.
document.getElementsByClassName("night profile-container")
see: getElementsByClassName() with two classes
In any case what you are doing is a bad practice, constantly changing the dom like this as its slows the browser rendering repaint. I would instead advise putting in your stylesheet and rending to the dom in one batch.
body.night .profile-container {
/* styles ...*/
}
Steve Tomlin
- 3,391
- 3
- 31
- 63
-
Also I think the class changing logic `body.classList.add('night');` should be placed in `function toggleNight()` @Maniac Piano – Marson Mao Oct 23 '20 at 08:13
-
@ManiacPiano body.night .profile-container will work, the same way body.night works, unless you are overriding the style. Can you show a new example with it implemented to prove it not working? – Steve Tomlin Oct 23 '20 at 08:32
-
Here - I updated the pen for you with working example - https://codepen.io/inspiraller/pen/oNLBXpL – Steve Tomlin Oct 23 '20 at 08:35
-
@SteveTomlin, I didn't use `!important` declaration when trying it. It worked, Thanks. – Maniac Piano Oct 23 '20 at 08:46
-
@ManiacPiano Going forward I would discourage using important. It was just to illustrate that you already had styles that were overriding the stylesheeet. – Steve Tomlin Oct 23 '20 at 08:49
-