JavaScript切换div自定义属性isshown：true转false有效，false转true失效

问题根源 #

你代码里的问题在于：getAttribute获取的是字符串类型的属性值，不是布尔值。

• 第一次点击时，isShown是字符串"true"，非空字符串在布尔判断里会被视为true，!isShown取反后得到false，设置后属性值变成字符串"false"。
• 第二次点击时，isShown是字符串"false"，非空字符串依然被视为布尔true，!"false"的结果还是false，所以永远切不回true。

修复方案1：手动转换字符串与布尔值 #

修改JS代码，先把获取到的字符串转为布尔值，再取反，最后转成字符串存回去：

let div = document.querySelector(".thisDiv")

div.addEventListener("click", function(){
    // 将属性值转为布尔值判断
    var isShown = div.getAttribute("isshown") === "true";
    
    isShown = !isShown;
    // 转回字符串存入属性
    div.setAttribute("isshown", isShown.toString());
})

修复方案2：使用规范的data-*自定义属性（推荐） #

HTML改成用data-前缀的自定义属性（这是HTML规范推荐的自定义属性写法）：

<div class="thisDiv" data-isshown="true">
  click here
</div>

对应的JS代码：

let div = document.querySelector(".thisDiv")

div.addEventListener("click", function(){
    // 判断当前值是否为"true"
    const isShown = div.dataset.isshown === "true";
    // 取反后直接赋值，dataset会自动处理字符串转换
    div.dataset.isshown = !isShown;
})

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