如何在 <noscript> 标记中使用 <style> 元素？
Posted
技术标签:
【中文标题】如何在 <noscript> 标记中使用 <style> 元素？【英文标题】：How do I use a <style> element within a <noscript> tag? 【发布时间】：2019-07-20 14:41:01 【问题描述】：我有一个网站，在我的<script> 标记下方有一个<noscript> 标记，以防javascript 无法加载。它基本上关闭了一些与平滑滚动 JS 代码和预加载器有关的 CSS 值。
但是，当我通过 w3c html 验证器运行该站点时，它会显示：
Element style not allowed as child of element noscript in this context. (Suppressing further errors from this subtree.)
我使用的代码是：
<noscript>
<style type="text/css" media="screen">#main-body opacity: 1 !important; .viewport position: static; overflow: visible; h1, h2, h3 opacity: 1 .st-ca-title, .st-ca-sub, .st-co-title, .st-co-sub, .js-client-stagger, .btn, .btn a, .st-ho-title, .st-ho-sub, .st-ho-p opacity: 1
</style>
</noscript>
这段代码确实做了我想做的事（即，如果 JS 加载失败，确保网站仍然可以正常工作），但是我在这里做错了什么来得到这个错误吗？
我不能将<noscript> 标记放在文档的头部，因为它必须在主 js 脚本标记之后。
欢迎提出任何建议。
保罗。
【问题讨论】：
你能把 main.js 包含在头部吗？ 如果它工作，老实说我不会关注验证器 验证器是一个重要的工具，通常您应该致力于让您的页面进行验证。 有时如果您需要验证某个特定项目，您必须做出判断。 你是因为 IE 才尝试使用这个吗？如果是这种情况，请在this link 【参考方案1】：似乎没有任何理由将此代码视为无效。 <style> 元素是 <noscript> 元素的有效子元素，并且两者都是 <head> 或 <body> 的有效子元素。
通常情况下，您希望避免将标记与脚本和样式混为一谈。我建议有一个应用您的样式的类，然后使用 JavaScript 删除该类。通过这种方式，您可以将样式保存在一个位置，然后在脚本中包含删除这些样式的逻辑，从而完全避免嵌套的 <noscript> 和 <style> 方法。
<!DOCTYPE html>
<html>
<head>
<style>
.no-js
/* "no script" styles here */
</style>
</head>
<body class="no-js">
<script>
document.querySelector('body').classList.remove('no-js');
</script>
</body>
</html>
【讨论】：
【参考方案2】：我同意@jaasum 不要那样混合它们
不管它不会有你正在寻找的受限影响，像这样限定 css .. 这里红色应用于 noscript 标签内，否则应用绿色。
<!DOCTYPE html>
<html>
<head>
<style>
.danger
color: green; font-weight: bold;
noscript .danger
color: red; font-weight: bold;
</style>
<script>
function myStuff()
let p = document.createElement('p');
p.innerHTML = '<p>you seem to have <span class="danger">scripts enabled...</span></p>';
document.body.appendChild( p);
</script>
</head>
<body onload="myStuff()">
<noscript>
<h1>Script</h1>
<p>you need <span class="danger">scripts enabled</span></p>
</noscript>
</body>
</html>
【讨论】：
以上是关于如何在 <noscript> 标记中使用 <style> 元素？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 3 中使 <i> 标记成为 HREF？