0
我试图创建一个通用的JavaScript代码，用div遮盖元素，并使用CSS Transitions将其从原始位置移动到视口的中心，使其几乎全屏扩展，因为我这样做。如何使用JavaScript将元素应用于元素以使CSS转换生效？
我已经有一个工作脚本。见下面片段：（许多代码被注释掉，所以我希望你能理解。）
，我按照剧本的主要步骤如下：
- 这里是一个元素，并得到它的位置。
- 创建一个新的类，将任何给定的div放在步骤1中的元素之上（此类包含CSS转换属性）。
- 创建一个新的div元素，并为其分配在步骤2中创建的类。
- 现在将一个DIFFERENT类（从css样式表开始）应用于步骤3中的div以使其从这是它在脚本中收到的一个。
function expand(id) {
//I first create a style element in which I'll be able to insert a new class that I'm going to create. This new class will be used to position the future div on top of the element whose id was provided as argument of this function.
var style = document.createElement('style');
style.type = 'text/css';
var style_content = "";
var element = document.getElementById(id);
var element_properties = element.getBoundingClientRect(); //Here I get the position of the element.
//Now I describe the new class.
style_content += ".container_inactive {"
style_content += "box-sizing: border-box;";
style_content += "position:absolute;";
style_content += "top:" + element_properties.top + "px;";
style_content += "left:" + element_properties.left + "px;*/";
style_content += "padding:0px;";
style_content += "margin:0px;";
style_content += "border:solid;";
style_content += "border-color:black;";
style_content += "background-color:#40efbb;";
style_content += "height:" + element_properties.height + "px;";
style_content += "width:" + element_properties.width + "px;";
style_content += "transition: all 0.5s;";
style_content += "z-index:1;";
style_content += "}";
style.innerHTML = style_content; //I insert the previously described class inside the <style></style> tags.
document.getElementsByTagName('head')[0].appendChild(style); //I insert the previously created style element inside the <head></head> tags.
//Now I create the div
var div = document.createElement("div");
div.id = "created_div";
div.className = "container_inactive"; //Here I assign the created class to the created div
document.getElementsByTagName("body")[0].appendChild(div); //And instert the div in the body of the document
}
//------------This is just a random divisor------------------
document.getElementById("test_button_1").onclick = function() {
expand("test"); //I excecute the script to create the class and the div, and assigning the style to the div.
/*With the following line I would apply a DIFFERENT class to the div (and not the one created in the previous script), in order to make it transition to it. But here is where I run into troubles.
\t If uncommented, the CSS Transition won't take place.
If excecuted later by another button, the CSS does takes place as you can see in this snippet*/
//document.getElementById("created_div").classList.toggle("container_expand");
};
//This is what I have to do in order to make it work.
document.getElementById("test_button_2").onclick = function() {
document.getElementById("created_div").classList.toggle("container_expand");
};<!DOCTYPE html>
<html>
<body>
<style>
/*This is the class that will be applied with the second button.*/
.container_expand {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
/*------------------*/
.container {
padding: 3px;
margin: 10px;
height: 40px;
background-color: #bad4ff;
}
</style>
<div class="container" id="test_button_1">Click me first to create a new class, a new div, and asign the created class to the created div.</div>
<div class="container" id="test_button_2">Click me second to apply the "container_expand" class, which was on the css <style></style> tag sincethe begining.</div>
<br>
<br>
<span id="test">Test</span>
</body>
</html>正如你所看到的，我必须使动画制作过程有两个不同的按钮。当我尝试将每个按钮的代码放在一个按钮中时，动画不会发生，并且div会立即出现，并显示分配给它的最后一个类的属性。
你们看到只用一个按钮就可以做到这一点吗？而只是使用JavaScript，而不是jQuery。
非常感谢你！
要修改内部样式表的内容，不设定'style'元件的'.innerHTML'。使用'styleSheets'属性。 https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets –