2023.10.26JavaScript中的.style.width不能用于变量赋值

2023.10.26JavaScript中的.style.width不能用于变量赋值

之前存在一个误区，.style.width可用来设置元素的宽度为 0 ，就理所当然地认为其可以作为赋值语句使用。但实际并非如此。
例如以下的JS代码，if语句并不会执行，因为
document.getElementById(“mySidenav”).style.width = “0”; 这行代码仅用于浏览器页面渲染，并不会存储对应的数据至mySidenav。
如下为错误的测试代码：

<!-- html -->
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

//js
let mySidenav = document.getElementById("mySidenav").style.width
let main = document.getElementById("main").style.marginLeft

function openNav() {
    if (mySidenav != "0" ) {    
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "-200px";
    } else {
        document.getElementById("mySidenav").style.width = "200px";
        document.getElementById("main").style.marginLeft = "0";        
    }

}

输出mySidenav可以看到， mySidenav是一个数字变量，使用如下语句可以查看数据类型

console.log(typeof mySidenav)

因此对if语句中的mySidenav != “0” 并不会生效，更换成mySidenav != 0，也并不会被.style.width赋值

正确的写法如下：

let mySidenav = document.getElementById("mySidenav").style.width
let main = document.getElementById("main").style.marginLeft

function openNav() {
    if (mySidenav != 0) {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "-200px";
        mySidenav = 0; // 更新 mySidenav 的值
    } else {
        document.getElementById("mySidenav").style.width = "200px";
        document.getElementById("main").style.marginLeft = "0";        
        mySidenav = 1; // 更新 mySidenav 的值
    }
}