Use-Cases of this tutorial
- Know about the "disabled" attribute that can be applied to a stylesheet tag.
// create new link element var link = document.createElement('link'); // set properties of link link.href = 'css/common.css'; link.rel = 'stylesheet'; link.type = 'text/css'; // append link element to html document.body.appendChild(link);
However modern browsers have made this simpler now.
The disabled attribute can be applied to the markup of the stylesheet element <link rel="stylesheet">, and this effectively disables the stylesheet from loading during page load, and prevent containing styles from being applied.
<!-- this CSS file will not be downloaded by browser on page load --> <link rel="stylesheet" type="text/css" href="css/common.css" id="common-css" disabled>
// now CSS stylesheet with id "#common-css" will be loaded and styles applied document.querySelector("#common-css").removeAttribute('disabled'); // alternate document.querySelector("#common-css").setAttribute('disabled', false);