<script> 标签何时应该可见，为啥可以？
Posted
技术标签:
【中文标题】<script> 标签何时应该可见，为啥可以？【英文标题】：When should <script> tags be visible and why can they?<script> 标签何时应该可见，为什么可以？ 【发布时间】：2016-11-03 18:11:06 【问题描述】：样式为display:block 的script 元素出现可见。为什么它是可能的？是否有任何需要的实际用例？
td > *
display: block;
<table>
<tr>
<td>
<script type="text/javascript">
var test = 1;
</script>von 1
</td>
</tr>
</table>【问题讨论】：
我看到了一个可见的 CSS<style> 内容可编辑。实时查看效果的好方法。
为您的下一个挑战，设计一种让 cmets 可见的方法。
来到这里提到同样的事情，@JanDvorak。我第一次看到它时就炸了我的分钟。我在 codepen 上对此进行了演示
让我想起了黎明踏浪号，当时露西读到了一个让阿斯兰可见的咒语，她很惊讶魔法会影响到他，他基本上说，你认为我会违反自己的规则吗？
我来到这里认为这是一个基本问题，并在离开时学到了一些新东西。我
【参考方案1】：
默认情况下，使用display:none; 隐藏脚本标签。 Unor1 解释了底层语言规范。但是，它们仍然是 DOM 的一部分，可以进行相应的样式设置。
也就是说，重要的是要牢记脚本标签的作用。虽然它曾经伴随着类型和语言，但现在不再需要了。现在假设 JavaScript 在那里，因此浏览器将在从这些标签遇到（或加载）脚本时解释和执行脚本。
脚本执行后，标签的内容只是页面上的文本（通常是隐藏的）。该文本可以显示，但也可以删除 em> 因为它只是文本。
在页面底部，就在结束 </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://***.com/a/38147398/1026459
【讨论】：
【参考方案2】：用户代理（如浏览器）应使用的 HTML5 规范 defines a style sheet。 Section 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 元素之间的唯一“屏障”。它非常好，旨在能够覆盖作者样式表中用户代理样式表的样式（以及当然也包括在用户样式表中）。
为什么有人可能想要使用它？一个用例是displaying content without having to escape characters like </>，类似于旧的xmp 元素。 script 元素不仅可以用于脚本，还可以用于also for data blocks（即任何具有 MIME 类型的内容）。
【讨论】：
数据必须已经编码到<script> - src无法加载数据块。
@PauliSudarshanTerho：是的，如果用作数据块，script 元素上不允许使用 src 属性。【参考方案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>【讨论】：
不错，虽然我建议使用有效的 MIME 类型：text/html，并使用类似 class="codesample" 的东西来应用样式。只是出于迂腐的原因：D
@NiettheDarkAbsol：not 使用“真正的”MIME 类型（或将来可能成为一种类型的任何东西）可能更安全，以防万一某天浏览器可能决定以某种方式解析和执行该类型的脚本元素。也就是说，我更喜欢对自定义类型使用标准的 x- 前缀，即设为 text/x-example。【参考方案4】：
可能的用例：用于调试目的。
您可以在文档级别应用一个类，例如。 <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);
【讨论】：
为什么不<html class="debugscript">？
@Bergi 这也是一个选项，尽管它可能不会显示 <head> 脚本，因为 <head> 本身也有 display:none 所以你需要强行显示它，这可能会导致进一步的并发症。
你的意思是“更有趣”或“进一步的调试潜力”:-)【参考方案5】：
为什么
<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);
有需要的用例吗？
当然没有常见的规则，但一般规则的设计并不适用于您可以应用它们的一切。它们是为常见情况而设计的。
【讨论】：
事实上，如果您在 Chrome 检查器中查看脚本标签，您会看到user agent stylesheet: script display:none
我会让“DOM 元素和其他元素一样”。事实上，它们是具有解析规则的非常特殊的 HTML 标签。
有趣的事实：由于脚本内容被解析为 CDATA，您可以像过去使用 <xmp> 一样使用 <script type="text/plain">，但仍然与 W3C 验证器兼容。
为什么在没有特殊情况规则的情况下script display: block !important;不起作用？
@wutzebaer 它对我来说很好用。你确定你做的一切都是正确的吗？请注意，script 标签也必须在可见元素中 - 它只会在正文中显示scripts，而不是例如head 默认情况下。以上是关于<script> 标签何时应该可见，为啥可以？的主要内容，如果未能解决你的问题，请参考以下文章
我应该将 <script> 标签放在 HTML 标记中的啥位置？