Question

目标：打开一个新窗口，插入元素，然后使用外部样式表将css样式应用于新窗口中的元素。

问题：我可以在新窗口中插入元素，获取新窗口头元素以将链接元素设置为外部样式表，但新窗口元素不受样式表的影响。

的Javascript

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

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

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

HTML

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

Answer 1

如果您查看地址栏，则该网址不在您的网站上（在Chrome中，它是about:blank）。样式表的路径是相对的，找不到它。

您可以使用完整的绝对网址来解决这个问题：

link.setAttribute('href', 'http://example.org/stylesheets/my.css');

https://jsfiddle.net/3xhrnpsa/（使用bootstrap的CSS进行演示，使文本sans-serif）

外部样式表在新窗口中

1 个答案: