JavaScript导致CSS转换无法工作_Javascript_Html_Css_Transition

JavaScript导致CSS转换无法工作

javascript html css

JavaScript导致CSS转换无法工作,javascript,html,css,transition,Javascript,Html,Css,Transition,我正在尝试从css文件加载样式，从js文件加载菜单在js文件中，我使用“document.write”，这导致css的转换无法工作 HTML: JavaScript（文件名：menu.js）与因此，文档不会被重写。请在JavaScript中尝试此选项（假设您希望此div位于正文末尾）：在JavaScript中尝试以下方法（假设您希望在正文末尾使用此div）：实际上，您的代码很好，但缺少一些东西。您的转换无效，因为您没有指定转换您应该创建一个trans:hover、trans:clic

我正在尝试从css文件加载样式，从js文件加载菜单

在js文件中，我使用“document.write”，这导致css的转换无法工作

HTML:

JavaScript（文件名：menu.js）

与

因此，文档不会被重写。

请在JavaScript中尝试此选项（假设您希望此div位于正文末尾）：

在JavaScript中尝试以下方法（假设您希望在正文末尾使用此div）：

实际上，您的代码很好，但缺少一些东西。您的转换无效，因为您没有指定转换

您应该创建一个trans:hover、trans:clicked或任何其他您想要的状态，其中包含css属性，比如背景色：红色；然后，当您悬停、单击或其他操作时，您将看到您的转换工作正常。但是，您的document.write是一种糟糕的做法。它会把事情搞砸的

试试这个：

HTML

剧本

document.getElementById("abc").innerHTML = "menu";

试试看：

事实上，您的代码很好，但缺少一些东西。您的转换无效，因为您没有指定转换

试试这个：

HTML

剧本

document.getElementById("abc").innerHTML = "menu";

试试看：

文档。write（str）

将覆盖巡演文档，因此

菜单将替换
，这将导致整个CSS无法工作，而不仅仅是转换。改用innerHTML


let container=document.querySelector（'.trans'）；
设str=`
菜单
`;
container.innerHTML=str
.trans{
文本对齐：居中；
填充顶部：250px；
过渡：所有的1容易；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
-webkit过渡：所有1s轻松；
}
.trans:悬停{
背景色：#c00；
颜色：白色；
}
文档。write（str）
将覆盖巡演文档，因此菜单
将替换
，这将导致整个CSS无法工作，而不仅仅是过渡。改用innerHTML


let container=document.querySelector（'.trans'）；
设str=`
菜单
`;
container.innerHTML=str
.trans{
文本对齐：居中；
填充顶部：250px；
过渡：所有的1容易；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
-webkit过渡：所有1s轻松；
}
.trans:悬停{
背景色：#c00；
颜色：白色；
}
确保加载CSS后加载脚本。不要使用，因为它将清除整个文档确保加载CSS后加载脚本。不要使用，因为它将清除整个文档var textNode=document.createTextNode（“菜单”）；myDiv.appendChild（textNode）绝对可以。但是请注意，myDiv.textContent='menu'
做的事情完全一样。var textNode=document.createTextNode（“菜单”）；myDiv.appendChild（textNode）绝对可以。但是请注意，myDiv.textContent='menu'执行完全相同的操作。
str = `
<div>menu</div>
`;
document.write(str);

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

document.write(str);

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

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

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

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

.trans:hover {
  background-color: red;
}

document.getElementById("abc").innerHTML = "menu";