<script> 标签什么时候应该可见，为什么可以？

Question

样式设置为 display:block 的 script 元素显示为可见。为什么可行，是否有需要的实际用例？

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

Answer 1

Why can <script> Tags be visible?

因为它们都是 HTML 与其他任何元素一样的元素，因此没有理由在 HTML 规范中编写特殊情况规则（这会增加复杂性）以防止 CSS 应用给他们。

任何元素都可以设置样式。举个例子：

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

Is there any Usecase where it is wanted?

当然没有常见的，但一般规则的设计目的不是为了让您可以应用它们的一切有意义。它们是为常见情况设计的。

Answer 2

可能的用例：用于调试目的。

您可以在文档级别应用 class，例如。 <body class="debugscript">，然后使用一些 CSS:

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}

Answer 3

另一个（不常见）用例：

我有时会在风格指南中使用 <script> 标签作为简短的 HTML 代码示例。这样我就不必转义 HTML 标签和特殊字符。文本编辑器标签自动完成和语法高亮仍然有效。但是没有简单的方法可以在浏览器中添加语法高亮。

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>

Answer 4

HTML5 规范 defines a style sheet that user agents (like browsers) are expected to use. Section 10.3.1 列出了 "Hidden elements" 的样式：

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

如您所见，它将 display: none; 应用于 script。

这是您的用户和隐藏的 script 元素之间唯一的 "barrier"。 它非常好，旨在能够覆盖用户的样式-作者样式表中的代理样式表（当然也在用户样式表中）。

为什么有人可能想要使用它？一个用例是 displaying content without having to escape characters like </>, similar to the old xmp element. The script element can be used not only for scripts, but also for data blocks（即，对于具有 MIME 类型的任何内容）。

Answer 5

使用 display:none; 默认隐藏脚本标签。 Unor¹ 解释了底层语言规范。但是，它们仍然是 DOM 的一部分，可以相应地设置样式。

也就是说，请务必牢记脚本标签的确切作用。虽然它曾经伴随着类型和语言，但现在不再需要了。现在假定 JavaScript 在那里，因此浏览器将在遇到（或加载）来自这些标记的脚本时解释和执行脚本。

脚本执行后，标签的内容只是页面上的文本（通常是隐藏的）。此文本可以显示，但它也可以被删除 因为它只是文本。

在页面底部，就在结束 </html> 标记之前，您可以非常轻松地删除这些标记及其文本，并且页面不会发生任何变化。

例如：

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

这不会删除任何功能，因为页面的状态已经更改并反映在当前的全局执行上下文中。例如，如果页面加载了诸如 jQuery 之类的库，删除标记并不意味着 jQuery 不再公开，因为它已经添加到页面的运行时环境中。它本质上只是让 DOM 检查工具不显示脚本元素，但它确实强调了一旦执行的脚本元素实际上只是文本。

_{1. unor，2016 年 7 月 7 日星期四，wutzebaer，"When should tags be visible and why can they?"，7 月 1 日在 10:53，}

<script> 标签什么时候应该可见，为什么可以？

When should <script> tags be visible and why can they?

html

css

script-tag