Ron I Ron I - 8 months ago 26
CSS Question

External stylsheets in new window

Goal: open a new window, insert elements, and then apply css style to the elements in the new window using an external style sheet.

Problem: I can insert the element in the new window, get the new window head element to have link elements to an external style sheet, but the new window elements are not being affected by the stylesheet.



$('.button').on('click', function() {
let win =;

let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', '/stylesheets/my.css');

let div = document.createElement('div');
div.innerHTML = '<div> hello world</div>';


<div class="container">
<div class="button">
test element


If you look in the address bar, the URL is not on your website (In Chrome, it's about:blank). The path to your stylesheet being relative, it is not found.

You can solve that by using the full, absolute URL:

link.setAttribute('href', ''); (using bootstrap's CSS for the demo, which makes the text sans-serif)