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 –