点击按钮后联系表单元素无变化，仅控制台数值变更的技术求助

点击按钮时想实现显示联系表单的功能，目前控制台能看到数值变化，但页面中的div元素位置完全没改变。试过用display: flex和display: none控制显示状态，结果还是一样。

var btnK = document.getElementById("K");
var contact = document.querySelector("#contactTab");
var contactTab = getComputedStyle(contact).left;

btnK.addEventListener("click", contactFun);

var contactOff = 3000 + "px";
var contactOn = 650 + "px";

function contactFun() {
    if (contactTab == contactOff) {
        contactTab = contactOn;
        console.log("Changing from none to flex . Succes");
        console.log(contactTab);
    } else if (contactTab == contactOn) {
        contactTab = contactOff;
        console.log("Changing from flex to none . Succes");
        console.log(contactTab);
    }
}

问题核心是你只修改了变量的值，没有把新值同步到DOM元素的样式上。contactTab只是存储了元素初始的left属性值，修改这个变量不会自动影响页面元素的样式，必须手动把新值赋值给元素的style属性。

方案1：通过left属性控制位置 #

修改contactFun函数，每次点击时获取当前元素的left值，修改后直接赋值给contact.style.left：

var btnK = document.getElementById("K");
var contact = document.querySelector("#contactTab");

btnK.addEventListener("click", contactFun);

var contactOff = "3000px";
var contactOn = "650px";

function contactFun() {
    // 每次点击时获取当前元素的left值
    var currentLeft = getComputedStyle(contact).left;
    if (currentLeft === contactOff) {
        contact.style.left = contactOn;
        console.log("移动到显示位置");
    } else if (currentLeft === contactOn) {
        contact.style.left = contactOff;
        console.log("移动到隐藏位置");
    }
}

方案2：通过display控制显示隐藏（更适合显示/隐藏场景） #

如果你的需求是直接显示或隐藏表单，推荐操作display属性，比修改left更直观：

var btnK = document.getElementById("K");
var contact = document.querySelector("#contactTab");

btnK.addEventListener("click", contactFun);

function contactFun() {
    // 判断当前的display状态，初始状态可能未设置style.display，需处理空值
    if (contact.style.display === "none" || contact.style.display === "") {
        contact.style.display = "flex";
        console.log("显示表单");
    } else {
        contact.style.display = "none";
        console.log("隐藏表单");
    }
}

如果元素的初始显示状态是通过CSS类设置的，更推荐用添加/移除类的方式控制，比直接操作style更易维护：

/* CSS 代码 */
.contact-tab {
    display: flex;
}
.contact-tab.hidden {
    display: none;
}

// JS 代码
function contactFun() {
    contact.classList.toggle("hidden");
}

内容的提问来源于stack exchange，提问作者Heat504