正文上的香草JavaScript设置样式

vanilla JavaScript set style on body

本文关键字：设置 样式 JavaScript 香草 正文      更新时间：2023-09-26

为什么不工作?

使用香草JavaScript设置body标签的样式?

<html>
   <body style="display:none;">
       test
   </body>
   <script>
       document.getElementsByTagName("body").style.display = "block";
   </script>
</html>

因为getElementsByTagName()返回一个NodeList，而不是单个元素。将其作为数组处理:

document.getElementsByTagName("body")[0].style.display = "block";

或者更简单的body:

document.body.style.display = "block";

如果你想要body标签，你可以简单地使用document.body。

console.time("show body");
document.body.style.display = "none";
setTimeout(function () {
    console.timeEnd("show body");
    document.body.style.display = "block";
}, 3000);
<h1>Hello World!</h1>

我使用了以下解决方案:

<script>
    function changeDisplay(){
        document.body.style.display = 'block';
    }
    setTimeout(function () { changeDisplay(); }, 0);
</script>

而body是文档本身的一部分，你不必调用getElementBy…直接输入document.body.style.display = "block";

相关文章：