什么时候 < script > 标记可见，为什么可见？

样式为 display:block的 script元素显示为可见。为什么它是可能的，是否存在任何真正需要它的用例？

td > * {
display: block;
}
<table>
<tr>
<td>
<script type="text/javascript">
var test = 1;
</script>von 1
</td>
</tr>
</table>

8700 次浏览
小开

为什么 <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); }

有没有需要它的用例？

当然不是普通的规则，但是一般的规则并不是为 可以应用到的 一切而设计的。它们是为一般情况而设计的。

小开

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

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

另一个(不常见的)用例:

我有时在样式指南中使用 <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>

小开
最佳答案

用户代理(比如浏览器)需要使用的 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元素之间的唯一“障碍”。它非常好，可以在作者样式表中覆盖用户代理样式表中的样式(当然也可以覆盖用户样式表中的样式)。

为什么会有人想用它？一个用例是 显示内容而不必转义字符，如 ABC0/>，类似于旧的 xmp元素。script元素不仅可以用于脚本，还可以用于 也适用于数据块(例如，任何具有 MIME 类型的元素)。

小开

默认情况下，脚本标记使用 display:none;隐藏。Unor1解释了基础语言规范。但是，它们仍然是 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


提交答案