JavaScript 最大化点击答案

【问题标题】：JavaScript Maximize onclickJavaScript 最大化点击
【发布时间】：2020-12-21 13:50:24
【问题描述】：

我想制作一个看起来像 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); */

}

列表项

【问题讨论】：

标签： javascript html css linux window

【解决方案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

【讨论】：