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

142

一个script是得到了风格的元素display:block出现可见的。为什么有可能，并且有需要的任何实际用例？

td > * {
  display: block;
}

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

展开摘要

html css script-tag

— 乌策拜尔
source

55

我看到了可见的CSS <style>，其内容可编辑。实时查看效果的好方法。

— John Dvorak

19

对于您的下一个挑战，请设计一种使评论可见的方法。

— 李斯特先生

11

来这里提到同一件事，@ JanDvorak。我第一次看到它时就吹起了我的话。我已经在Codepen

— Kjeld Schmidt

6

当露西读到使阿斯兰人可见的咒语时，让我想起了《黎明踏浪者的航程》，她惊讶于魔术会影响他，他基本上说，你认为我会违反我自己的规则吗？

— 戴维·康拉德

4

我来到这里的时候以为这是一个基本的问题，因此学到了一些新知识。我<3沙发

— Jacksonkr '16

104

HTML5规范定义了期望用户代理（例如浏览器）使用的样式表。10.3.1节列出了“隐藏元素”的样式：

@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元素之间的唯一“障碍” 。它非常好，可以覆盖作者样式表中的用户代理样式表中的样式（当然，也可以覆盖用户样式表中的样式）。

为什么有人可能想要使用它？一种用例是显示内容，而不必像<>旧xmp元素一样转义 /等字符。该script元素不仅可以用于脚本，还可以用于数据块（即，用于具有MIME类型的任何内容）。

— Unor
source

数据必须已经被编码为<script>-数据块不能由加载src。

@PauliSudarshanTerho：是的，如果用作数据块，则src该script元素上不允许使用该属性。

— UNOR

71

为什么<script>标签可见？

因为它们是与其他元素一样的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); }

是否有需要的用例？

当然没有通用的规则，但是一般的规则并不是为了使您可以应用的所有规则有意义。它们是为常见情况而设计的。

— 昆汀
source

9

实际上，如果您在Chrome检查器中查看脚本标签，就会看到user agent stylesheet: script {display:none}

— Niet the Dark Absol

8

我会说“ DOM元素和其他元素一样”。实际上，它们是带有解析规则的非常特殊的HTML标签。

— Bergi '16

2

有趣的事实：由于脚本内容被解析为CDATA，因此您可以<script type="text/plain">像<xmp>过去一样使用，但仍与W3C验证器兼容。

— 李斯特先生

2

script {display: block !important;}没有特殊情况规则时为什么不起作用？

— wutzebaer '16

3

@wutzebaer对我来说很好。您确定自己做对了吗？请注意，script标记也必须在可见元素中-它只会script在正文中显示，而不是head默认情况下。

— a安

36

另一个（不常见）用例：

有时我会<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>

展开摘要

— 杰弗里
source

2

不错，尽管我建议使用有效的MIME-type：，text/html并使用类似class="codesample"的样式进行应用。仅仅是出于学究的原因：D

— Niet the Dark Absol

5

@NiettheDarkAbsol：最好不要使用“真正的” MIME类型（或将来可能成为的任何一种），以防万一某天某个浏览器可能决定以某种方式解析和执行该类型的脚本元素。也就是说，我更愿意x-为自定义类型使用标准前缀，即make it text/x-example。

— Ilmari Karonen '16

14

可能的用例：用于调试。

您可以在文档级别应用一个类，例如。<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);
}

— Niet the Dark Absol
source

1

为什么不<html class="debugscript">呢？

— Bergi '16

@Bergi这也是一个选择，尽管它可能不会显示<head>脚本，因为它<head>本身也具有脚本，display:none所以您需要强行显示它，这可能导致进一步的复杂性。

— Niet the Dark Absol's

10

您的意思是“进一步的乐趣”或“进一步的调试潜力” :-)

— Bergi '16

1

默认情况下，使用会隐藏脚本标签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，“标签何时应可见以及为什么它们可以看见？”，7月1日，10：53，https： //stackoverflow.com/a/38147398/1026459}

— 特拉维斯J
source