Remove CSS @media print rules without modifying CSS files [closed]

Question

I add bootstrap CSS files to my page. I don't want to modify the CSS files.

When I try yo print page, bootstrap modify media to print styles and remove all color properties.

How can I cancel bootstrap media settings for print?

This jquery code can remove all css; $("*").css("all","unset");

Is there way to remove css settings for only @media display{ .. }

Answer 1

You could get the stylesheet and remove each rule that starts with '@media print', note that styleSheets[0] should be pointed to the stylesheet with the relevant rules.

for(var i=document.styleSheets[0].rules.length -1; i >0; i--){
   if(document.styleSheets[0].rules[i].cssText.indexOf("@media print") !=-1 )
   {
      document.styleSheets[0].deleteRule(i);
   }
}

disclaimer: it's smelly code, I would not use this in an actual application. I would look for an appropriate solution (i.e. removing the lines from the css file) However, sometimes you don't have control over all the files being served, or you just need to print a page without additional formatting. Then this would suffice.