JavaScript 最大化onclick

Question

我想做一个类似cmd的网站。它基本上完成了，但我认为如果我再添加一项功能，它看起来会好得多。我想做到这一点，当您单击最大化按钮时，cmd 应该最大化。这一切都完成了，当你再次点击最大化按钮时，它不会恢复默认大小。知道如何解决吗？

代码：（我试图在 if-else 和 do-while 语句中实现它，但没有真正起作用。）

function maxiMize() {
    
    var maximize = document.getElementById("maximize");
    var term_head = document.getElementById("term_head");
    var terminal_main = document.getElementById("terminal_main");
    var main_header = document.getElementById("main_header");
    var x = 0;

    if (maximize.style.height = "800px") {
        terminal_main.style.width = "auto";
        terminal_main.style.height = "100%";
        terminal_main.style.margin = "0";
        term_head.style.width = "auto";
        term_head.style.margin = "0";
        document.getElementById('term_head').style.borderRadius = "0";
        document.getElementById('term_head').style.MozBorderRadius = "0";
        main_header.style.position = "relative";
        main_header.style.width = "99.999%";
        document.body.style.background = "#000";
        x = 1;
    } else if (maximize.style.height != "800px") {
        terminal_main.style.width = "auto";
        terminal_main.style.margin = "0 15%";
        terminal_main.style.height = "800px";
        term_head.style.width = "auto";
        term_head.style.margin = "0";
        document.getElementById('term_head').style.borderRadius = "15px";
        document.getElementById('term_head').style.MozBorderRadius = "15px";
        main_header.style.position = "fixed";
        main_header.style.width = "100%";
        document.body.style.background = "#333";
        x = 0;
    }/*
    do {
        terminal_main.style.width = "auto";
        terminal_main.style.height = "100%";
        terminal_main.style.margin = "0";
        term_head.style.width = "auto";
        term_head.style.margin = "0";
        document.getElementById('term_head').style.borderRadius = "0";
        document.getElementById('term_head').style.MozBorderRadius = "0";
        main_header.style.position = "relative";
        main_header.style.width = "99.999%";
        document.body.style.background = "#000";
        x = 1;
    }while(x !=1); */

}

列表项

Answer 1

实际上，您可以使用类附加和移除，而不是做所有这些，而不是做所有这些，根本不会让人头疼，但是 我假设 terminal_main 是父级全部

 var maximize = document.getElementById("maximize"),
    term_head = document.getElementById("term_head"),
    terminal_main = document.getElementById("terminal_main"),
     main_header = document.getElementById("main_header");
    if(maximize.classList.contains('max-width'){
    terminal_main.classList.remove('max-width);    
    }else {
    terminal_main.classList.add('max-width);    
    }

css:

.terminal_main{}
.term_head{}
.main_header{}
.maximize{}
//this will override the above lines when you add max-width to parent of them all 
.max-width{} //css styles of terminal main
.max-width .term_head{}//css styles of term head
.max-width .main_header{} //css styles of main header
.max-width  .maxmize{} //css styles of maximize

JavaScript 最大化onclick

JavaScript Maximize onclick

html

javascript

css

linux

window