Is there a solution to disable Javascript style changes in print?

Is there any solution to turn off Javascript style changes in print?

For example, if I hide something through Javascript, but I want to include this hidden information in print.

I hid it divusing Javascript and I want to show that divif Javascript is disabled. Now the problem is that it is divhiding with Javascript, which also does not appear when the page prints.

+5
source share
4 answers

Use the print style sheet with operators !importantto make the item visible for printing. A.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

CSS

#myDiv { display: block!important; } 
+5

( , ). html- (screen.css print.css) javascript ..

, , js ( CSS- jquery).

:

"screen.css"

body {
    background-color: #ccc; /* or whatever colour your designer chose; if it NEEDS to be white, simply change something else (e.g. background-image, font-size, etc.) */
}

"print.css"

body {
    background-color: #fff;
}

"the-javascript-file.js"

$(document).ready(function()
{
    if (isPrinting() == false)
    {
        init();
    }
});

function isPrinting()
{
    var isPrint = false;
    /* I'm not 100% sure about the string literal check 'rgb(255, 255, 255)',
       should do some testing here with other values || other attributes...
       (font-size, color, line-height, other attributes that will have the 
       greatest difference / variation between "screen" and "print" styles)
    */
    if ($('body').css('background-color') == 'rgb(255, 255, 255)')
    {
        isPrint = true;
    }
    return isPrint;
}

function init()
{
    // All sorts of awesome goes here
}

! !

, :

  • "screen.css"
  • "#ccc"
  • "the-javascript-file.js"
  • JS ... "#ccc"...
  • JS
  • "print.css"
  • "#fff"
  • "the-javascript-file.js"
  • JS
  • JS : "#fff"
  • JS :)

, -:)

+3

!important , , , , !important.

CSS , . , JS , . , className.

, . โ€‹โ€‹

This is an additional advantage that you do not need to think about the need to redefine these styles, since they will not be applied in the first place (for printing).

+2
source

I suggest you take a look at this article: CSS Design: Going to Print .

Grz, Kris.

-3
source

All Articles