How do I use a element within a tag?

问题

I have a site where I have a <noscript> tag below my <script> tag in case the javascript fails to load. It basically turns off some CSS values to do with some smooth scroll JS code and a pre-loader.

However when I run the site through the w3c HTML validator it says:

Element style not allowed as child of element noscript in this context. (Suppressing further errors from this subtree.)

The code I'm using is:

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

This code does do what I want it to (i.e. ensures the site still works OK if the JS fails to load), but have I done something wrong here to get this error?

I can't put the <noscript> tag in the head of the document because it has to come after the main js script tag.

Any suggestions are most welcome.

Paul.

回答1:

There doesn't appear to be any reason why this code would be considered invalid. A <style> element is a valid child of a <noscript> element and both are valid children of either <head> or <body>.

Typically though you want to avoid mixing your markup with your scripts and styling. I'd recommend having a class that applies your styles, and then removing that class with JavaScript. This way to you can keep your styles in one place and then include the logic to remove those styles along with your script avoiding the nested <noscript> and <style> approach entirely.

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

I agree with @jaasum don't mix them like that

regardless it wouldn't have the restricted affect you are looking for, scope the css like so.. here the color red is applied inside the noscript tag, otherwise green is applied.

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

来源：https://stackoverflow.com/questions/54895932/how-do-i-use-a-style-element-within-a-noscript-tag

标签

javascript