javascript - Is there a way to enable media print css to a normal view? - Stack Overflow

admin管理员组

文章数量:1345078

I developed a website with a bunch of print media queries to align stuff when printing the page. when you go to the print mode on web browser, the queries works great. but i want apply/remove those @media print queries on a regular web page without having to go into the printing mode.(by clicking a button) is there any way to achieve this?

I developed a website with a bunch of print media queries to align stuff when printing the page. when you go to the print mode on web browser, the queries works great. but i want apply/remove those @media print queries on a regular web page without having to go into the printing mode.(by clicking a button) is there any way to achieve this?

• javascript
• html
• css
• printing

Share Improve this question Follow edited May 6, 2016 at 20:22 Nick Zuber 5,63733 gold badges2525 silver badges4949 bronze badges asked May 6, 2016 at 20:16 CoderKKCoderKK 36111 gold badge77 silver badges1818 bronze badges 5

• like a print preview? – Daniel A. White Commented May 6, 2016 at 20:23
• 1 Just remove the print media in the link attribute? – epascarello Commented May 6, 2016 at 20:24
• @epascarello what do you mean? – CoderKK Commented May 6, 2016 at 20:37
• @DanielA.White yes. but different from browsers print preview module. – CoderKK Commented May 6, 2016 at 20:37
• Make it a normal stylesheet to test and add it back when done. – epascarello Commented May 6, 2016 at 20:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

In addition to Boldewyn's answer, if you have @media print styles inside <style> tags, you can replace them with @media screen:

Array.prototype.forEach.call(document.getElementsByTagName('style'), function(style) {
    style.innerText = style.innerText.replace(/@media print/gi, '@media screen');
});

See the demo.

To add to yezzz's answer: If you have the print CSS linked in the HTML like

<link rel="stylesheet" media="print" href="...">

you can remove the media attribute to enable those styles everywhere, either on the server or with Javascript:

document.querySelector('[media="print"]').removeAttribute('media');

Note, that this doesn't work, if the statements in the print stylesheet are wrapped in a @media print {} rule.

First thing that es to mind is use classes. Simple example to give you the general idea. If you had a button that toggles emulateprint class on the body you could use eg. this css:

body {
  color: black;
}
body.emulateprint {
  /* put same styles as @media print in here */
  color: red;
}

@media print {
  body {
    color:red;
  }
}

本文标签： javascriptIs there a way to enable media print css to a normal viewStack Overflow