堆栈内存溢出
  繁体   English   中英

使用 vanilla javascript，从头部向主体添加类

[英]Using vanilla javascript, add class to body from within head

 原文  2017-01-25 07:04:52  1   2    javascript

问题描述

我想在head标签中做一个快速的 javascript 检查，像这样：

<html>
    <head>
        ...
        <script>
            document.body.classList.remove("no-js");
            document.body.classList.add("js");
        </script>
    </head>
    <body class='no-js'>
        ...
    </body>
</html>

这不起作用。 Cannot read property classList of null ，这...很公平。 如果我将<script>标签移动到<body> ，一切正常，但我想要<head>的<script>标签。

我有哪些选择？

编辑：我应该对错误更清楚。 我意识到问题是当我尝试添加类时主体尚未加载。 但是，我最初使用了一些 Modernizr，它以某种方式能够从头部修改主体类，我认为它没有使用window.onload或类似的东西。

2 个解决方案

解决方案1
 8  2017-01-25 07:07:05

加载正文后运行代码。 有几种方法可以解决这个问题：

  1. 将代码移动到在全局上下文中定义的命名函数中，并在onload调用它。 

 <html> <head> ... <script> function load() { document.body.classList.remove("no-js"); document.body.classList.add("js"); } </script> </head> <body onload="load();" class='no-js'> ... </body> </html>

  1. 或者将代码移动到DOMContentLoaded事件侦听器回调，以便在加载 dom 元素后调用。 

 <html> <head> ... <script> document.addEventListener("DOMContentLoaded", function() { document.body.classList.remove("no-js"); document.body.classList.add("js"); }); </script> </head> <body class='no-js'> ... </body> </html>

  1. 或者将整个script标签移动到页面的末尾。 

 <html> <head> ... </head> <body class='no-js'> ... <script> document.body.classList.remove("no-js"); document.body.classList.add("js"); </script> </body> </html>

解决方案2
 1  2017-01-25 07:08:01

在执行 javascript 时没有 body 标记，因为浏览器还没有处理它。 您需要在正文中添加脚本标记，或者将其添加为要在文档加载时执行的事件。 有关示例，请参阅DOMContentLoaded 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在正文中使用 javascript 将样式表添加到 Head 在 vanilla JavaScript 上缓慢添加类 单击添加类以使用 vanilla JavaScript 隐藏其他元素 延迟后使用香草JavaScript添加课程 HTML<a>使用 vanilla javascript 添加类属性</a> Vanilla JS web 组件包括和 如何追加<script> to Head or Body Using Javascript? 将数据从头部的JavaScript传输到主体的html 如何将 Javascript 短语（在体内）移动到头部 如何使用香草 Javascript 添加 classList？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM