By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,911 Members | 1,213 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,911 IT Pros & Developers. It's quick & easy.

Setting styles dynamically only for @media screen

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a

"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.