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

Groups > comp.lang.javascript > #28648

Re: Setting style with JS including @media statement?

Show key headers only | View raw

Tuxedo <tuxedo@mailinator.com> wrote on 05 Sep 2015 in
comp.lang.javascript: 

> 
> 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?

window.onresize = function(event) { if (...) etc. };

To get your mind to it, 
look at this amazing page,
and look at its source-code:

<http://maloweb.com/snippets/responsivestuff.html>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Back to comp.lang.javascript | Previous | Next — Previous in thread | 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