JSFiddle - React, Tailwind, and code Playground

remove_print_stylesheet_copy_screen_and_set_as_print ;;;;;;;;;;;;;;;;;; stylesheet switcher that duplicates screen stylesheet, changes media of duplicate from screen to print, print preview sometimes applies the new changes? and also sometimes can crash a safari tab

by dledle2

HTML

<link rel="stylesheet" type="text/css" media="screen" href="http://a1.nyt.com/assets/article/20160113-172825/css/article/article/styles-print.css">

<link id="legacy-zam5nzz" rel="stylesheet" type="text/css" href="http://typeface.nytimes.com/css/zam5nzz.css" media="all">

JavaScript

javascript_: function MyBookmarkletDebugAlert(strMessage) {
  if (boolMyBookmarkletDebugAlerts) {

    if (boolMyBookmarkletDebugToRegularAlert) {
      alert(strMessage);
    }

    if (boolMyBookmarkletDebugToConsole) {
      console.log('console log instead of alert: ' + strMessage);
    }
  } /*end big if boolMyBookmarkletDebugAlerts section */
  /* end of function MyBookmarkletDebugAlert */
}

var links = document.getElementsByTagName('link');
var links_originalLength = links.length;
intPrintStyleSheetIndex = -2;
intScreenStyleSheetIndex = -2;
boolMyBookmarkletDebugAlerts = true;
boolMyBookmarkletDebugToConsole = true;
boolMyBookmarkletDebugToRegularAlert = false;

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  if (link.getAttribute('media') == "print") {
    MyBookmarkletDebugAlert('print stylesheet is ' + i);
    intPrintStyleSheetIndex = i;
  }

}

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  if (link.getAttribute('media') == "screen") {
    MyBookmarkletDebugAlert('screen stylesheet is ' + i);
    intScreenStyleSheetIndex = i;
  }

}
/* console.log(link);  */

console.log('screen index is ' + intScreenStyleSheetIndex);
console.log('print index is ' + intPrintStyleSheetIndex);


/*  now below to disable the old print stylesheet */
try {
  document.getElementsByTagName('link')[intPrintStyleSheetIndex].setAttribute('media', 'none');
} catch (e) {}
/* above: now we change media of current print stylesheet to disable it */






/*  now below code to clone and etc for the new print stylesheet */

links[intScreenStyleSheetIndex].parentNode.appendChild(links[intScreenStyleSheetIndex].cloneNode("true"));
/* duplicates screen stylesheet: adds an extra copy of the screen stylesheet   */

console.log('index of newly added stylesheet is ' + (links_originalLength - 1 + 1));


console.log('media of newly added stylesheet before changing its -media- is ' + links[links_originalLength - 1 +...