Aby dynamicznie dołączyć do strony internetowej zewnętrzny arkusz stylów CSS, wystarczy utworzyć element link, nadać mu wymagane atrybuty (type, rel, href) i wstawić go do dokumentu. W poniższym przykładzie nowy znacznik link dołączono do sekcji HEAD. Oczywiście atrybut href powinien być zgodny z lokalizacją dołączanego pliku. W przykładzie dodatkowo występuje atrybut id, dzięki niemu można łatwo wskazać element, np. podczas usuwania go z dokumentu.

let link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = 'add-css.css';
link.id = 'add-css';
document.head.appendChild(link);

Elementy strony internetowej można łatwo usuwać z pomocą metody remove(). Jeśli wymagana jest zgodność z przestarzałą przeglądarką Internet Explorer, należy skorzystać ze starszej metody removeChild().

document.getElementById('add-css').remove();

Metoda removeChild().

document.getElementById('add-css')
  .parentElement.removeChild(document.getElementById('add-css'));

Przykładowa implementacja

Skrypt zabezpieczono przed wielokrotnym dołączaniem tego samego pliku CSS oraz przed próbą usuwania nieistniejącego znacznika link.

window.addEventListener('load', function() {
  document.getElementById('css-on').addEventListener('click', function() {
    if(!document.getElementById('add-css')) {
      let link = document.createElement("link");
      link.type = "text/css";
      link.rel = "stylesheet";
      link.href = 'add-css.css';
      link.id = 'add-css';
      document.head.appendChild(link); 
    }
  });

  document.getElementById('css-off').addEventListener('click', function() {
    if(document.getElementById('add-css')) {
      document.getElementById('add-css').remove();
    }
  });
  
});

Kod HTML przykładu.

<p id="tester">
  JavaScript to skryptowy język programowania
  stworzony przez firmę Netscape.
</p>
<button id="css-on">Dołącz plik CSS</button>
<button id="css-off">Usuń plik CSS</button>

Zawartość przykładowego dołączanego arkusza stylów.

#tester {
  background: #f60;
  color: #fff;
  padding:20px;
}