HighDots Forums  

Setting styles dynamically only for @media screen

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Setting styles dynamically only for @media screen in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
C A Upsdell
 
Posts: n/a

Default Setting styles dynamically only for @media screen - 08-11-2004 , 02:38 PM






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?




Reply With Quote
  #2  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: Setting styles dynamically only for @media screen - 08-11-2004 , 03:06 PM







"C A Upsdell" <cupsdell0311XXX@-@- (AT) XXXrogers (DOT) com> wrote

Quote:
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.


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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.