gpt4 book ai didi

JavaScript 导致 CSS 过渡不起作用

转载 作者:行者123 更新时间:2023-11-28 19:16:17 25 4
gpt4 key购买 nike

我正在尝试从 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);

所以文档不会被重写。

最佳答案

为您的 JavaScript 尝试此操作(假设您希望在正文末尾使用此 div):

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

关于JavaScript 导致 CSS 过渡不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58238721/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com