Editing CSS in @media print

Discussion in 'Javascript' started by Nick, Nov 28, 2005.

  1. Nick

    Nick Guest

    Hello,
    I am trying to edit a CSS rule with Javascript, which is for printing. Thus

    @media print
    {
    #footer { display: none; }
    }

    I would like to be able to access the display attribute of #footer, but
    I can't get to it. If I edit the element.style.display property then
    that changes it, but for all the stylesheet, not just print.

    Anybody?
    Thanks

    Nick
     
    Nick, Nov 28, 2005
    #1
    1. Advertising

  2. Nick

    VK Guest

    Nick wrote:
    > Hello,
    > I am trying to edit a CSS rule with Javascript, which is for printing. Thus
    >
    > @media print
    > {
    > #footer { display: none; }
    > }
    >
    > I would like to be able to access the display attribute of #footer, but
    > I can't get to it. If I edit the element.style.display property then
    > that changes it, but for all the stylesheet, not just print.


    You did not specify where is your CSS table: inline or from an external
    file (in the latter case it gets even more funny :).

    Presuming you have an inline style declaration:

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style>
    @media all {
    body { background-color: white; }
    }

    @media screen {
    #footer { display: block; }
    }

    @media print {
    #footer { display: none; }
    }
    </style>
    <script type="text/javascript">
    function test() {
    // To get media.print::footer.display in IE:
    //alert(document.styleSheets[0].rules[2].style.display);

    // To get media.print::footer.display in FF:
    // alert(ss.cssRules[2].cssRules[0].style.display);

    // To get media.print::footer.display in Opera:
    // Have no idea: window and document seems do not expose
    // any scriptable object for style (?)

    // Other browsers may be even more amazing (?)
    }
    </script>
    </head>

    <body onload="test()">
    <div id="footer">Footer</div>
    </body>
    </html>

    I would suggest to reverse your logic: instead of patching the CSS
    table - change style attributes of elements themselve using className()
    and/or setAttribute() methods. This way you'll get much more reliable
    anduniversal solution.
     
    VK, Nov 28, 2005
    #2
    1. Advertising

  3. Nick wrote:

    > I am trying to edit a CSS rule with Javascript, which is for printing.


    Not considering that this is not generally possible, why would you want to?
    The very idea of CSS rules for printing is that no other technique would be
    required for adequate presentation.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Nov 28, 2005
    #3
  4. Nick

    Nick Guest

    Thomas 'PointedEars' Lahn wrote:
    > Nick wrote:
    >>I am trying to edit a CSS rule with Javascript, which is for printing

    >
    > Not considering that this is not generally possible, why would you want to?
    > The very idea of CSS rules for printing is that no other technique would be
    > required for adequate presentation.


    Indeed. It was all a bit of a hack (and still is to some extent), after
    using JS to optionally show a footer (because it uses JS to position it
    (bad I know), and it'd be better non-JS to have it hidden than displayed
    in the middle of the page).

    Using <noscript> tags to achieve the effect instead.

    Thanks
     
    Nick, Nov 28, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mika
    Replies:
    4
    Views:
    545
  2. kmsiever

    Re: media="print" css-problem?

    kmsiever, May 13, 2004, in forum: HTML
    Replies:
    1
    Views:
    401
  3. kmsiever

    Re: media="print" css-problem?

    kmsiever, May 13, 2004, in forum: HTML
    Replies:
    3
    Views:
    420
    Jukka K. Korpela
    May 15, 2004
  4. kmsiever

    Re: media="print" css-problem?

    kmsiever, May 13, 2004, in forum: HTML
    Replies:
    1
    Views:
    379
  5. Shank

    CSS and print media

    Shank, Oct 7, 2004, in forum: HTML
    Replies:
    2
    Views:
    495
    Toby Inkster
    Oct 8, 2004
Loading...

Share This Page