仅打开DevTools时样式才生效？打印Div样式丢失问题咨询

先给你拆解下导致样式丢失的核心原因，再给你对应的修复方案：

1. 先揪出一个低级但致命的小错误 #

你定义的函数是PrintElem()（首字母大写），但链接点击事件里写的是printElem()（首字母小写）——JavaScript是严格区分大小写的！正常点击时这个函数根本没被正确调用，自然会出现异常。不过你说开DevTools点击就正常，大概率是调试时的操作延迟或者浏览器临时的宽松处理，但这个大小写问题必须先修正。

2. 样式未加载完成就触发打印 #

就算函数名统一了，你当前的代码写完HTML后立刻调用print()，这时候新窗口里的外部样式表（如果有的话）还没来得及加载解析，打印时样式自然不生效。而打开DevTools操作时，中间有了人为的延迟，样式刚好加载完成，所以看起来正常。

修复后的完整代码 #

改成下面这样，等待新窗口的load事件触发后再执行打印，确保所有样式资源都加载完毕：

function printElem() {
  var mywindow = window.open('', 'PRINT', 'height=400,width=600');
  // 用模板字符串让代码更易读
  mywindow.document.write(`
    <html>
      <head>${document.head.innerHTML}</head>
      <body>${document.body.children[1].innerHTML}</body>
    </html>
  `);
  mywindow.document.close();

  // 等待新窗口所有资源加载完成后再执行打印
  mywindow.onload = function() {
    mywindow.focus();
    mywindow.print();
    mywindow.close();
  };
}

同时修正链接的点击事件（确保函数名统一）：

<a onClick="printElem()" href="#"> print a div! </a>

额外优化建议 #

• 尽量别直接写入整个document.head.innerHTML，里面可能包含原页面的脚本、无关meta标签，可能干扰新窗口的打印逻辑。可以单独提取所有link和style标签写入新窗口的head。
• 可以给页面添加@media print专用样式，专门控制打印时的排版效果，让输出更符合预期。

内容的提问来源于stack exchange，提问作者anita