Question

我刚看了apptivate.ms上random app page的页面来源，并在<head>注意到了这个JavaScript：

<script type="text/javascript">
        document.write("<style type=\"text/css\">.app-description { max-height: 600px }</style>");
</script>

在客户端显然是完全静态的，所以我想知道用例是什么。因为他们Stack Exchange开发人员（apptivate.ms背后的人）非常聪明，所以确定有一些理由，但我无法弄清楚哪一个。我想这与延迟规则在整个文档加载之前变得活跃有关，但我希望一旦浏览器“看到”新标记就应用该规则......

Answer 1

这是因为隐藏了.app-description元素的部分内容，可以通过单击“显示更多”按钮来显示。

如果禁用JavaScript，该按钮将无效，因此如果相关样式直接位于样式表中，您将永远无法看到其余内容。通过使用JavaScript在<head>中添加该样式，可确保启用了JS的用户不会立即看到所有内容，而是获得“增强”体验，而则不会启用JS仍然可以使用该网站。

这是启用JS时的屏幕截图。 “显示更多”按钮使用JavaScript将元素扩展到全高：

enter image description here

这是一种很好的渐进增强方法 - 使用document.write在style内插入新的head元素，避免任何可能的无格式内容闪现（在这种情况下，开发人员可以等到DOM准备就绪，然后使用JavaScript动态添加maxHeight属性，但这会导致用户在DOM准备好的JavaScript之前短暂地看到完整高度。

Answer 2

这被称为“渐进式”增强。基本上，这个概念很简单;不要以为每个人都会启用JavaScript，即使98％的人会......但如果他们这样做了，那就让它做一些好事。

我们的想法是让您的 DOM （HTML）到位，并且在没有显式 NEED 的情况下工作，以启用JS来使用它。

然后，如果JS加载（在这种情况下必须添加该样式），您可以使用特定的类名来定位元素。在这种情况下，它是.app-description。如果您没有使用JS，则相关项目不会受到影响。

希望有道理:)

编辑：现在，您仍然可以加载一个执行某些CSS操作的JS文件，但是它被放置在页面上的脚本标记本身的原因是因为您可以避免HTTP如果不需要，请一起请求。

通过document.write（）？</style>添加简单的静态<style>标记的原因是什么

2 个答案: