How to change style css value using javascript?
If you change the css style using javascript, then the style will be added to the general css style. See image below. Question: how to add or change style in media screen?
3
-
Are you trying to modify the actual CSS file itself? Something else? This sounds like the makings of an XY Problem. Can you elaborate on what you’re actually trying to accomplish and why?David– David2023-08-27 14:37:29 +00:00Commented Aug 27, 2023 at 14:37
-
There may be some confusion about what element.style.display does in JavaScript. It is changing the style attribute of an element. It is not changing anything in a stylesheet.A Haworth– A Haworth2023-08-27 14:50:00 +00:00Commented Aug 27, 2023 at 14:50
-
Just to clarify: are you trying to change the display value of a particular element or are you trying to change the value in a stylesheet?A Haworth– A Haworth2023-08-27 15:00:00 +00:00Commented Aug 27, 2023 at 15:00
Add a comment
|
2 Answers
Solution 1
Try to give it !important to be
el.style.setProperty("display", "block !important")
Solution 2
First, set the display to a variable:
.div2 {
--display: none;
display: var(--display);
}
el.style.setProperty("--display", "block");
1 Comment
New York is my city
Thank you. Thanks to the --variable, I solved my problem.
You need to check the device width.
const width = window.innerWidth || document.documentElement.clientWidth ||document.body.clientWidth;
(width > 500) ? el.style.setProperty("display", "block !important") : el.style.setProperty("display", "none !important")
