代码之家 › 专栏 › 技术社区 › pjk_ok

如何在<noscript>标记中使用<style>元素?

noscript w3c-validation html javascript

pjk_ok · 技术社区 · 6 年前

我有一个网站 <noscript> 我下面的标签 <script> 标记以防javascript加载失败。它基本上关闭了一些css值来处理一些平滑的滚动js代码和一个预加载程序。

但是,当我通过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 & GT; 标记在文档头部,因为它必须位于主js脚本标记之后。

任何建议都是非常欢迎的。

保罗。

0 回复 | 直到 6 年前

jaasum 6 年前

似乎没有任何理由将此代码视为无效。一 <style> 元素是 <noscript> 元素和两者都是 <head> 或 <body> .

尽管您通常希望避免将标记与脚本和样式混合在一起。我建议使用一个应用样式的类,然后使用javascript删除该类。这样,您可以将样式保存在一个地方,然后将逻辑与脚本一起删除这些样式,以避免嵌套 <NoScript & GT; 和 <风格& GT; 完全接近。

<!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>

David Bray 6 年前

我同意“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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前