Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #28644

Setting style with JS including @media statement?

Path csiph.com!au2pb.net!feeder.erje.net!1.eu.feeder.erje.net!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From Tuxedo <tuxedo@mailinator.com>
Newsgroups comp.lang.javascript
Subject Setting style with JS including @media statement?
Supersedes <msf1et$bsc$1@solani.org>
Date Sat, 05 Sep 2015 17:48:03 +0200
Organization solani.org
Lines 25
Message-ID <msf2sg$gjf$1@solani.org> (permalink)
Mime-Version 1.0
Content-Type text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding 7Bit
X-Trace solani.org 1441468112 17007 eJwFwYcBwDAIA7CXGDbjHEKa/0+oRA+NTQQDfHyPYJUWIXLzRHft6y+lmIuY+HLUBVmA3OgFuOOMVu3lXVOD1JkwY3rt+qBbvHXM0n8jehvN (5 Sep 2015 15:48:32 GMT)
X-Complaints-To abuse@news.solani.org
NNTP-Posting-Date Sat, 5 Sep 2015 15:48:32 +0000 (UTC)
User-Agent KNode/4.10.5
Cancel-Key sha1:NSNAISRS7ak7qOPVLVPVb4XzJSw=
X-User-ID eJwFwYkBwCAIA8CVypOo41gg+4/gHYLGWkkwIejMWuU0Rd840nZQx5HjjdrE10Rxm2vub/kAF9AQ6A==
Cancel-Lock sha1:ITJOw7wCVdJRPBazd1UXb0TtbN4=
X-NNTP-Posting-Host eJwNy7kBADEIxMCWzLdAORhD/yXcKZhMJiC0Kwxqa8ubr2+Zv9F3mQdEcNrwG20zd7K5/nDW9NS6Y6KWgk8bvZNXxFby/4IqSwvL3r+CnP4A1GgfFg==
Xref csiph.com comp.lang.javascript:28644

Show key headers only | View raw


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 
properties relating to any media queries above 300 pixels, which I don't 
want it to. As such, is 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

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread


Thread

Setting style with JS including @media statement? Tuxedo <tuxedo@mailinator.com> - 2015-09-05 17:48 +0200
  Re: Setting style with JS including @media statement? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-05 23:04 +0200
    Re: Setting style with JS including @media statement? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-05 23:33 +0200

csiph-web