我刚刚看了一个random app page的页面源码在 apptivate.ms 上并在 <head> 中注意到这个 JavaScript :
<script type="text/javascript">
document.write("<style type=\"text/css\">.app-description { max-height: 600px }</style>");
</script>
它在客户端显然是完全静态的，所以我想知道有什么用例。由于他们的 Stack Exchange 开发人员(支持 apptivate.ms)非常聪明，我确定有一些原因，但我无法弄清楚是哪个。我想这与延迟规则在整个文档加载之前生效有关，但我希望一旦浏览器“看到”新标签就应用该规则...
最佳答案
因为.app-description的部分内容元素是隐藏的，可以通过单击“显示更多”按钮来显示。
如果 JavaScript 被禁用，按钮将不起作用，因此如果有问题的样式直接在样式表中，您将永远看不到其余内容。通过在 <head> 中添加该样式，使用 JavaScript，它确保启用 JS 的用户不会一次看到所有内容，而是获得“增强”体验，而那些没有启用 JS 的用户仍然可以使用该网站.
这是启用 JS 时的屏幕截图。 “显示更多”按钮使用 JavaScript 将元素扩展到全高:
这是渐进增强的好方法 - 通过使用 document.write插入新的 style head 内的元素你避免了任何可能的无样式内容的闪现(在这种情况下，开发人员可以等到 DOM 准备好然后使用 JavaScript 动态添加 maxHeight 属性，但这会导致用户在 JavaScript 执行之前短暂地看到完整高度DOM 就绪)。
关于javascript - 通过 document.write() 添加一个简单的静态 <style> 标签的原因是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13647477/