Tuxedo
9/5/2015 3:24:00 PM
Hello,
Using CSS @media queries rather than conditional JS-CSS style
modification if matching some body.scrollWidth statement, styling for
different screens is much simplified. For example:
@media (max-width: 300px){
#my_menu{
backgroundImage='url(small.png')';
}
}
But there are still situations where it may be necessary to dynamically
change styles to elements via JS. Normally I would do:
document.getElementById("my_menu").style.backgroundImage='url(another.png)';
In combination with media queries, however, the above also changes style
proerties relating to any media queries above 300 pixels, which I don't want
it to. As such, it possible to change #my_menu element including the CSS
@media condition so that the @media (max-width: 300px) is properly expressed
and applied to the document via Javascript? If so, how can this be done?
Many thanks,
Tuxedo