时间戳

首页 > 解决方案 > JavaScript 导致 CSS 转换不起作用

javascript - JavaScript 导致 CSS 转换不起作用

问题描述

我正在尝试从 css 文件和 js 文件中的菜单加载样式。

在 js 文件中，我使用“document.write”，这会导致 css 的转换不起作用。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <script type="text/javascript" src="menu.js"></script>
        <div class="trans">aaa</div>
    </body>
</html>

CSS（文件名：style.css）

.trans {
    text-align: center;
    padding-top: 250px;
    transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
}

JavaScript（文件名：menu.js）

str = `
<div>menu</div>
`;
document.write(str);

更新 - 解决方案：

感谢所有受访者！谢谢你，我得到了解决方案:-)

添加async以便脚本不会阻止动画：

<script async type="text/javascript" src="menu.js"></script>

更换

document.write(str);

和

document.currentScript.insertAdjacentHTML("beforebegin", str);

所以文件不会被重写。

标签： javascripthtmlcsstransition

解决方案

为你的 JavaScript 试试这个（假设你希望这个 div 在正文的末尾）：

var myDiv = document.createElement("div");
myDiv.className = "abc";
var textNode = document.createTextNode("menu");
myDiv.appendChild(textNode);
document.body.appendChild(myDiv);

推荐阅读