469,920 Members | 2,241 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,920 developers. It's quick & easy.

Setting styles dynamically only for @media screen

I have a site where I am setting a style dynamically, using the JS
statement:

obj.style.backgroundImage = 'url(img/bak_page.jpg)';

where 'obj' is either document.getElementById(id), or document.all[id],
depending on browser support.

This works just fine, with just one small problem: I want to set the style
ONLY for screen media, not for printer media; the above statement appears to
apply the style to all media.

In CSS I have previously set the style for print media using code of the
form:

@media print
{
html#html { background-image:none; }
}

and this works just fine (it prevents printing of a page's background image
when printing) UNLESS I later dynamically change the style using JS.

How can I dynamically change the style only for a specified medium?

Jul 20 '05 #1
1 2662

"C A Upsdell" <cupsdell0311XXX@-@-@XXXrogers.com> wrote in message
news:bB*****************@news04.bloor.is.net.cable .rogers.com...
I have a site where I am setting a style dynamically, using the JS
statement:

obj.style.backgroundImage = 'url(img/bak_page.jpg)';

where 'obj' is either document.getElementById(id), or document.all[id],
depending on browser support.

This works just fine, with just one small problem: I want to set the style ONLY for screen media, not for printer media; the above statement appears to apply the style to all media.
Right, you're not changing the rules, you're overriding them by setting a
property directly. You could try to use the CSS-DOM
(http://www.w3.org/TR/DOM-Level-2-Style/) to change the rule for only one
particular medium. Or, if you have an element somewhere that is affected by
a static property that you've made dependent on the medium, you could check
the value of that property to determine what the actual medium is, and
conditionally set the background image based on that.


In CSS I have previously set the style for print media using code of the
form:

@media print
{
html#html { background-image:none; }
}

and this works just fine (it prevents printing of a page's background image when printing) UNLESS I later dynamically change the style using JS.

How can I dynamically change the style only for a specified medium?


Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Soobrassen Thoplan | last post: by
3 posts views Thread by sagar | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.